Why is this AJAX form not submitting?

Question

Whenever I press the "Submit Request" button within the form, no error pops up and it does not redirect me to the page which is noted in the PHP script. Any ideas as to why this is occurring?

Code from webpage w/ form:

<form id="consultation-reservation" action="actions/consultation-request.php" method="post">
  <input name="fullname" type="text" placeholder="Full Name (Required)" class="mt5" />
  <input name="phonenumber" type="text" placeholder="Phone Number (Required)" class="mt5" />
  <input name="emailaddress" type="text" placeholder="E-Mail Address (Required)" class="mt5" /> 
  <textarea name="comments" placeholder="Additional Comments/Questions" class="mt10"></textarea>  
  <p class="hidden" id="consultation-reservation-error">Please verify all required fields are complete.</p>  
  <a class="button" id="consultation-reservation-submit">Submit Request</a>
</form>

<script type="text/javascript">
$(document).ready(function(){                                               
    $("#consultation-reservation-submit").click(function(){
        $("#consultation-reservation").submit();
    });
});

$('#consultation-reservation').submit(function(e) {
    register();
    e.preventDefault();
});

function register()
{               
    jQuery.ajax({
        method: "POST",
        url: "actions/consultation-request.php",
        data: $('#consultation-reservation').serialize(),
        dataType: "json",
        success: function(msg){

        if(parseInt(msg.status)==1)
        {
          window.location=msg.txt;
        }
        else if(parseInt(msg.status)==0)
        {
            error(1,msg.txt);
        }
        }
    });

}               

function hideshow(el,act)
{
    if(act) $('#'+el).hide(0).slideDown(500, 'linear');
    else $('#'+el).hide();
}   

function error(act,txt)
{
    if(txt) $('#consultation-reservation-error').html(txt);
    $('#consultation-reservation-error').hide(0).slideDown(500, 'linear');
}       
</script>

PHP Script which is supposed to be executed via ajax: (I am going to apply the mysql_real_escape_string to the variables containing the form data, but just haven't yet)

<?php

if(empty($_POST['fullname']) || empty($_POST['phonenumber']) || empty($_POST['emailaddress']))
{
    die('{status:0,"txt":"Please verify all required fields are complete."}');
}

$name = $_POST['fullname'];
$phonenumber = $_POST['phonenumber'];
$email = $_POST['emailaddress'];
$comments = $_POST['comments'];


if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['emailaddress'])))
    die('{status:0,"txt":"Please Provide a Valid E-Mail Address."}');

echo '{status:1,txt:"consultation-request-successful"}';

?>

Answer 1

echo '{status:1,txt:"consultation-request-successful"}';

The above is invalid JSON because it doesn't use the double quotes around the txt and status key. You specified the response data type as json , so jQuery will try to parse the response as JSON, and if it fails it will run the error handler (if set) instead of the success handler.

So either add the double quotes, or build the JSON in another way:

$response = array('status' => 1, 'txt' => 'consultation-request-successful');
echo json_encode($response);

Building JSON in this way is much better because all of the quotes will be automatically handled, also special characters within the values will be escaped as necessary.