php - Unable to fire ajax call in jQuery document ready -
i facing problem ajax call when trying submit form database.
here code:
<?php include 'dbconnect.php'; include 'session.php'; ?> <form class="form" id="form" action="" method="post"> <table class = "left"> <tr align="justify"> <td></td> </tr> <tr> <td> <p align="right"> <font size = "4">new subject name : <input type = "text" name = "subjectname" id = "subjectname"/> </font> </p> </td> </tr> <tr> <td> <p align="center"> <input type = 'image' name = 'submit' src="images/submit.gif" value = 'submit' width='100' height='35'/> </p> </td> </tr> </table> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </script> <script> $(document).ready( function() { // bind submit event of our form $("form#form").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: "subjectitem.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(); }); }); </script>
i not sure why doest not insert data database after user click submit button. please point error if had done wrong in code. thanks
<script> // setup global var ajax requests $.xhrpool = []; // abort ajax requests $.xhrpool.abortall = function() { $(this).each(function(idx, jqxhr) { jqxhr.abort(); }); $.xhrpool.length = 0 }; // setup ajax $.ajaxsetup({ beforesend: function(jqxhr) { $.xhrpool.push(jqxhr); }, complete: function(jqxhr) { var index = $.xhrpool.indexof(jqxhr); if (index > -1) { $.xhrpool.splice(index, 1); } } }); // make request function sendform(){ $.xhrpool.abortall(); // register inputs var $inputs = $form.find("input, select, button, textarea"); // set form data var formdata = new formdata($('.form')[0]); // set post url var formurl = ""; // disable inputs $inputs.prop("disabled", true); //make ajax request $.ajax({ url: formurl, type: 'post', data: formdata, mimetype: "multipart/form-data", contenttype: false, cache: false, processdata: false, success: function(data, textstatus, jqxhr){ // handle success console.log("hooray, worked!"); // reenable inputs $inputs.prop("disabled", false); }, error: function(jqxhr, textstatus, errorthrown){ // handle error console.error("the following error occurred: "+textstatus, errorthrown); // reenable inputs $inputs.prop("disabled", false); } }); } </script>
replace submit button <button type="button" onclick="sendform();">submit form</button></p>
i hope helps, don't forget fill out formurl
var
Comments
Post a Comment