Question

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;
?>

Answer 1

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.