Ajax form not being submitted

Question

I am attempting to send a very simple login form from a jQuery Modal form.

$(  "#dialog-form"  ).dialog({
    var url = "../scripts/sign_up.php"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $("#dialog-form").serialize(),
        success: function(data){
            alert("it works")
        }
    });
});

This is my first real shot at trying Ajax and I am having issues getting the success method to go through. I have checked that my script is in the right place and that the dialog_form has the right id.

Am I sending this information incorrectly? Is there a good way to troubleshoot Ajax requests?

Right now I am just trying to get the info to go through and, to simply the question, removed other code for the form.

Answer 1

First, I might reccommend adding an error function to your Ajax request as well - it may help with error handling:

error: function (jqXHR, textStatus, errorThrown) {
    alert(textStatus);
    alert(errorThrown);
}

Second, how are you sending data back from the script to the Ajax request? If you're not echoing back any data from your script, the request is not going to know that the script ran sucessfully.

Therefore, you may want to add the following to your AJAX call:

dataType: "json",

And then return data from your PHP script like so:

$data = array("success"=> true);
echo json_encode($data);
exit;

In full (using your script):

$(  "#dialog-form"  ).dialog({
    var url = "../scripts/sign_up.php";
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: $("#dialog-form").serialize(),
        success: function(data) {
            if (data.success) {
                alert("it works")
            }
            else {
               alert("it failed, but no server error!");
            }
        }
        error: function (jqXHR, textStatus, errorThrown) {
            alert("server error");
            alert(textStatus);
            alert(errorThrown);
        }
    });
});