尝试使用jquery ajax发布而不离开页面

Question

Im following this question trying to post to a php page and have it perform an action on the data the problem is it seems to just refresh the page and not sure what its doing. In the network tab in element inspector my php page never appears. Here is my code:

js:

<script>

$(function () { $("#foo").submit(function(event){ // variable to hold request var request; // bind to the submit event of our form

// abort any pending request
if (request) {
    request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();

// let's disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);

// fire off the request to /form.php
request = $.ajax({
    url: "/DormDumpster/session/login-exec.php",
    type: "post",
    data: json
});

// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // log a message to the console
    console.log("Hooray, it worked!");
    alert("hello");
});

// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // log the error to the console
    console.error(
        "The following error occured: "+
        textStatus, errorThrown
    );
            alert("bye");

});

// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // reenable the inputs
    $inputs.prop("disabled", false);
});

// prevent default posting of form
event.preventDefault();

}); });

html:

        <form id = "foo" method="post" >
            <fieldset id="inputs">
                <input id="email" type="email" name="login" placeholder="Your email address" required>   <br>
                <input id="password" type="password" name="password" placeholder="Password" required>
            </fieldset>
            <fieldset id="actions"">
                <input type="submit" id="submit" name "Submit" value="Log in"">
                <label><input type="checkbox" checked="checked"> Keep me signed in</label>
            </fieldset>
        </form>

php

    $email = clean($_POST['login']);
    $password = clean($_POST['password']);

Any Ideas to what I am doing wrong or how to figure out what im doing wrong.

Answer 1

You are probably trying to attach the event listener prior to the form being available in the DOM - thus your form won't be found and no event listener will be attached. Try wrapping your code in a DOM-ready callback, to make sure that your form is in the DOM before trying to select it.

$(function () {
    $("#foo").submit(function(event){
         // All your code...
    });
});

More on why and when to use DOM-ready callbacks here.