How to make JQuery-AJAX request synchronous

Question

How do i make an ajax request synchronous   I have a form which needs to be submitted  But it needs to be submitted only when the user enters the correct password   Here is the form code    lt form name  form  action  insert php  method  post  onSubmit  return ajaxSubmit this     gt    And the jquery code for sending and checking password is this   var ajaxSubmit   function formE1         var password     trim     employee password   val            ajax           type   POST           async   false           url   checkpass php           data   password   password          success  function html                var arr   parseJSON html               if arr     Successful                     return true                else                   return false                                      However the form always submits  regardless of the value returned by the ajax request  I have checked everything else  The value of arr is coming out to be  successful  when correct password is entered and works correctly vice versa too    How do i make this request synchronous  as far as i can debug  the request is asynchronous so the form gets submitted before the request gets completed   Code for checkpass php   lt  php  require  includes apptop php    require  classes class employee php    require  classes class employee attendance php      employee password   POST  password       m new employee     m- gt setbyid employee 1    arr  m- gt editdisplay employee     if  arr  employee password       employee password     res  Successful       else    res  Password not match        echo  res    gt    Update  The solution has been found   As pointed by Olaf Dietshche  The return value of ajaxSubmit is not the return value of the success  function         ajaxSubmit returns no value at all  which is equivalent to undefined  which in turn evaluates to true   And that is the reason  why the form is always submitted and is independent of sending the request synchronous or not   So  I set a variable to 1 inside success function upon successful  And checked its value out of success function  if it was 1 outside the success function  then I wrote return true     else return false  And that worked   Updated working code   var ajaxsubmit function forme1        var password     trim     employee password   val         var test  0          ajax           type   POST           url   checkpass php           async  false          data   password   password          success  function html                if html     Successful                     test  1                 else                   alert  Password incorrect  Please enter correct password                     test  0                                        if test   1             return true        else if test   0             return false

User · Answer

try this  the solution is  work with callbacks like this    function          var jForm      form name form         var jPWField       employee password         function getCheckedState             return jForm data  checked state                function setChecked s            jForm data  checked state   s                jPWField change function               reset checked thing         setChecked null          trigger  change         jForm submit function            switch getCheckedState                  case  valid                   return true              case  invalid                     invalid  don submit                 return false              default                    make your check                 var password     trim jPWField val                        ajax                       type   POST                       async   false                       url   checkpass php                       data                             password     trim jPWField val                                             success  function html                            var arr   parseJSON html                           setChecked arr     Successful     valid    invalid                              submit again                         jForm submit                                                                  return false

User · Answer

I added dataType as json and made the response as json   PHP  echo json encode array  success   gt  res      send the response as json   use this instead of echo  res in your php file     JavaScript      var ajaxSubmit   function formE1             var password     trim     employee password   val                   ajax               type   POST               async   false               url   checkpass php               data   password   password              dataType  json      added this so the response is in json             success  function result                    var arr result success                  if arr     Successful                        return true                                    else                      return false                                                 return false

User · Answer

It s as simple as the one below  and works like a charm    My solution perfectly answers your question  How to make JQuery-AJAX request synchronous  Set ajax to synchronous before the ajax call  and then reset it after your ajax call      ajaxSetup  async  false      ajax  ajax call           ajaxSetup  async  true      In your case it would look like this      ajaxSetup  async  false       ajax           type   POST           async   false           url   checkpass php           data   password   password          success  function html                var arr   parseJSON html               if arr     Successful                     return true                else                   return false                                      ajaxSetup  async  true      I hope it helps

User · Answer

The below is a working example  Add async false   const response     ajax                       type  POST                       dataType  json                       async false                       url  your-url                       data   data   data                                                                   console log  response     response

User · Answer

Instead of adding onSubmit event  you can prevent the default action for submit button   So  in the following html    lt form name  form  action  insert php  method  post  gt       lt input type  submit    gt   lt  form gt     first  prevent submit button action  Then make the ajax call asynchronously  and submit the form when the password is correct      input type submit    click function e        e preventDefault      prevent form submit when button is clicked      var password     trim     employee password   val             ajax           type   POST           url   checkpass php           data   password   password          success  function html                var arr   parseJSON html               var  form      form                if arr     Successful                                      form submit      submit the form if the password is correct

User · Answer

Can you try this   var ajaxSubmit   function formE1                 var password     trim     employee password   val                     ajax                   type   POST                   async   false                   url   checkpass php                   data   password   password                  success  function html                        var arr   parseJSON html                       if arr     Successful                                                        form name  form     submit                              return true                                            else                          return false                                                                          return false

User · Answer

From jQuery ajax       async Boolean   Default  true   By default  all requests are sent asynchronously  i e  this is set to true by default   If you need synchronous requests  set this option to false    So in your request  you must do async  false instead of async   false    Update   The return value of ajaxSubmit is not the return value of the success  function         ajaxSubmit returns no value at all  which is equivalent to undefined  which in turn evaluates to true   And that is the reason  why the form is always submitted and is independent of sending the request synchronous or not   If you want to submit the form only  when the response is  Successful   you must return false from ajaxSubmit and then submit the form in the success function  as  halilb already suggested   Something along these lines should work  function ajaxSubmit         var password     trim     employee password   val           ajax           type   POST           url   checkpass php           data   password   password          success  function response                if response     Successful                                    form   removeAttr  onsubmit       prevent endless loop                    form   submit                                         return false

[jquery] How to make JQuery-AJAX request synchronous

Examples related to jquery

Examples related to ajax

Examples related to synchronous