jQuery Ajax not returning variables from external PHP

I have this code that takes info from a form and sends it to form.php where it is processed. form.php echoes the variables (Fullname: $fullname E-mail: $email Link: $link Instructions: $instr) which are supposed to be inputted to #success. My code behaves two different ways in firefox and chrome.

In Firefox, I am sent to form.php which displays the output properly but obviously I shouldn't be sent there, I should stay on my main page and see that output in #success. Basically, 开发者_开发技巧the ajax doesn't work.

In Chrome, the ajax does work but only pulls Fullname: Email: Link: Instructions: into #success. In essence, the jQuery is not passing the variables via POST.

mainpage.php:

<script type="text/javascript">
$(document).ready(function() {
    var data = $(form).serialize();
    $('#form').submit(function(event) {   
            $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
            }); 
     event.preventDefault();
     });
})
</script>

<div id="exchange_inside">
<div id="formdiv">
<br>
<form method="post" id="form">
    Name / Nom:<input type="text" name="fullname" /><br />
    E-mail / Courriel:<input type="text" name="email" /><br />                          Your Daily URL / Votre URL Quotidien:<input type="text" name="link" /><br />
    Voting Instructions / Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br />
    <input type="submit" value="Submit" />
</form>
</div>
</div>
<div id="success">
</div>

form.php:

<?php
if (isset($_POST['fullname'])){
    $fullname = $_POST['fullname'];   
}else{
    echo "No name";
}

if (isset($_POST['email'])){
    $email = $_POST['email'];   
}else{
    echo "No email";
}

if (isset($_POST['link'])){
    $link = $_POST['link'];   
}else{
    echo "No link";
}

if (isset($_POST['instr'])){
    $instr = $_POST['instr'];   
}else{
    echo "No instructions";
}

echo "Name: " .$fullname. " E-mail: " .$email. " Link: " .$link. " Instructions: " .$instr;
?>

Try changing up the jquery a bit by moving up event.preventDefault(); to before the ajax call and fix your var data = $("#form").serialize();:

$(document).ready(function() {

    $('#form').submit(function(event) { 
        event.preventDefault();  
        var data = $("#form").serialize();
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 

 });
}); //semicolon here

Put a semicolon on the end of $(document).ready for good measure.

Moving event.preventDefault() before the ajax call stops the form from submitting if the ajax fails for some reason or there is an error in the ajax call. Primarily with this method of form submit, you want to stop the default behavior of the form first.

Try getting rid of the $('#form').submit, which is submitting the form without ajax, like this:

$(document).ready(function() {
    var data = $('#form').serialize(); //this selector also needed to be fixed 
    $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
    }); 
});

Edit:
I misunderstood. Try serializing the data after submit has been pressed, rather than when the page loads, to fix the Chrome problem.

$('#form').submit(function(event) {   
        var data = $('#form').serialize(); //moved this line and fixed selector
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 
        event.preventDefault();
 });

You may also want to try changing the submit button to a regular button and binding the ajax to its onclick event. This would avoid problems with the form submitting without ajax, and fix the Firefox problem.

$(document).ready(function() {

    $("#form").submit(function(event) {   

         var data = $("#form").serialize();
            $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: data,
            success: function(data, status, xhr) {

                console.log(data);
                console.log(status);
                console.log(xhr);
                $('#success').html(result.responseText);
            }

            });

    event.preventDefault();
        return false;
     });
})

1. Your declaration of data wasn't in the global scope.(i packed it in the right local scope)
2. $(form).serialize() isn't equal to $("#form").serialize()
3. Edit back in your url =)
4. Use Jsfiddle and Firebug/Chrome Dev Tools to test your code!

Hope that helps