javascript - AJAX post form won't work. It does absolutely nothing -

there error in code , there js file included inside page prevented executing inside $(document).ready(function () { ...

i'm trying sumbit login form:

<form class="form" id="ajaxform">         <input type="text" name="username" placeholder="username">         <input type="password" name="password" placeholder="password">         <button type="submit" id="login-button">login</button> </form> 

via ajax code:

var request; $("#ajaxform").submit(function(event){      // abort pending request     if (request) {         request.abort();     }     // setup local variables     var $form = $(this);      // let's select , cache fields     var $inputs = $form.find("input, select, button, textarea");      // serialize data in form     var serializeddata = $form.serialize();      // let's disable inputs duration of ajax request.     // note: disable elements after form data has been serialized.     // disabled form elements not serialized.     $inputs.prop("disabled", true);      // fire off request /form.php     request = $.ajax({         url: "login.php",         type: "post",         data: serializeddata     });      // callback handler called on success     request.done(function (response, textstatus, jqxhr){         // log message console         console.log("hooray, worked!");     });      // callback handler called on failure     request.fail(function (jqxhr, textstatus, errorthrown){         // log error console         console.error(             "the following error occurred: "+             textstatus, errorthrown         );     });      // callback handler called regardless     // if request failed or succeeded     request.always(function () {         // reenable inputs         $inputs.prop("disabled", false);     });      // prevent default posting of form     event.preventdefault();   }); 

which found here: jquery ajax post example php

i'm trying post login.php checks if valid username , password. when press login button puts username , password in url , nothing. , when add action="login.php" method="post" submits form not via ajax because when comment ajax code out still submits. i'm trying prevent that. insights on problem?

edit: lives here now: http://5f6738d9.ngrok.io/test/public/index.html username , password test

check event bound within $(document).on('ready' ... otherwise event won't fire , form submit or not via ajax.

your code should like:

$(document).on('ready', function () {     var request;     $("#ajaxform").submit(function(event){      // abort pending request     if (request) {         request.abort();     }     // setup local variables     var $form = $(this);      // let's select , cache fields     var $inputs = $form.find("input, select, button, textarea");      // serialize data in form     var serializeddata = $form.serialize();      // let's disable inputs duration of ajax request.     // note: disable elements after form data has been serialized.     // disabled form elements not serialized.     $inputs.prop("disabled", true);      // fire off request /form.php     request = $.ajax({         url: "login.php",         type: "post",         data: serializeddata     });      // callback handler called on success     request.done(function (response, textstatus, jqxhr){         // log message console         console.log("hooray, worked!");     });      // callback handler called on failure     request.fail(function (jqxhr, textstatus, errorthrown){         // log error console         console.error(             "the following error occurred: "+             textstatus, errorthrown         );     });      // callback handler called regardless     // if request failed or succeeded     request.always(function () {         // reenable inputs         $inputs.prop("disabled", false);     });      // prevent default posting of form     event.preventdefault();   }); }); 

note these callback events deprecated of jquery 1.8.

you need ensure post , action attributes set on form in cases.