trying to post with jquery ajax without leaving the page

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.

I am not sure but maybe you also have to set `datatype: "json",` at the ajax-request... — zuluk, Sep 20 '13 at 06:05

score 3 · Accepted Answer · answered Sep 20 '13 at 05:57

3

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.

answered Sep 20 '13 at 05:57

Christofer Eliasson

32,939
7
74
103

I edit my code and added $(function () { }); around everything but I still have the same outcome – BluGeni Sep 20 '13 at 06:16

score 1 · Answer 2 · answered Sep 20 '13 at 05:58

1

i think you have to wrap your submit function inside doc ready:

$(function(){

   // here your form submit

});

answered Sep 20 '13 at 05:58

Jai

74,255
12
74
103

score 0 · Answer 3 · answered Sep 20 '13 at 15:49

It is always good to note what arguments you are passing as parameters and to check if it is valid within that function or property.

$(function(ready) {
     $.ajax({
          type: "POST",
          url: "/DormDumpster/session/login-exec.php",
          data: { name: "John", location: "Boston" },
          dataType: "JSON"
     })
}

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. - from http://api.jquery.com/jQuery.ajax/

trying to post with jquery ajax without leaving the page

3 Answers3