Jquery Ajax - Use event within an ajax callback function

Question

Any clues, how I would get this to work?

$( "#search_form" ).on('submit',function(event) {


ajax(function(response){
    if (response.status == 'error'){
      event.preventDefault();
      alert(response.status,response.msg);
    }else if(response.status == 'ok'){
      alert(response.status,response.msg);
    }
  });
});

event.preventDefault(); is not being called, probably because it's out of scope in the ajax function. This line simply prevents the button from carrying out a post action. How would i insert it into the ajax function? I'm just learning about callbacks and this has thrown me

Thanks y'all

Prevent it immediately, then initiate the submit on success via `$( "#search_form" )[0].submit()` — Kevin B, Jul 12 '18 at 15:22
@LGSon Doing so avoids the need to unbind, as it bypasses all bound events. — Kevin B, Jul 12 '18 at 16:22
No. `.click` for example will trigger events. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click vs https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit — Kevin B, Jul 12 '18 at 16:27

Asons · Accepted Answer · 2018-07-12T18:01:01.990

1

Updated, asking how-to after the Ajax call returns, which I initially didn't understood were asked for.

With your posted code, and as the Ajax call is async, the submit function will exit before the Ajax call returns, and then, when the Ajax call returns, the event is no longer available in that context.

To be able to actually resubmit the form after a successful Ajax call, do something like this, where you unbind the handler before submitting the 2nd time, e.g.

Note, as of ver. 3, the unbind() is deprecated, so I used .off()

$("#search_form").on('submit', function(event) {

  console.log("here we enter only once")

  event.preventDefault();

  console.log("simulate async with setTimeout, and after\nits delay (3 sec.) my answer will show up")

  // simulate ajax async call
  setTimeout(function() {
      console.log("success ... now we submit the form properly");
      // unbind and resubmit
      $( "#search_form" ).off('submit').submit()  
  }, 3000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="https://stackoverflow.com/a/51306380/2827823" method="post" id="search_form">
  <input type="text" value="some dummy value">
  <input type="submit">
</form>

edited Jul 12 '18 at 18:01

answered Jul 12 '18 at 13:00

Asons

84,923
12
110
165

Ok. I understand.... Your edit would prevent submit for any result of the ajax. How would i go about submitting the form when the response.status == ok ?? – Leo505 Jul 12 '18 at 13:22
$('#search_form').submit() //but flag your form so it does not go again in your handler :-) – Kapsonfire Jul 12 '18 at 13:41
@Leo505 You can simply submit the form again, using e.g. `$('#search_form').submit()`, and with a variable, or similar, determine if you are good to really submit it. – Asons Jul 12 '18 at 13:43
@Kapsonfire - I implemented this submit method and unbinding the event to prevent the loop with: $('#search_form').off().submit(); Now i'm getting no submission of the form.. – Leo505 Jul 12 '18 at 14:14
Ok, I realised why it is not sending, because the submit function is called again, which has preventDef in its first line. Will keep looking for a solution. Thanks – Leo505 Jul 12 '18 at 14:21
either unbind // .off('submit'); // if you'll never need the handler again OR set a flag, maybe with a global var (outside your handler function) – Kapsonfire Jul 12 '18 at 14:42
@Leo505 Added two new samples based on your comments – Asons Jul 12 '18 at 15:17
Sample 1 - The page would not submit after successful ajax call success: function () { $( "#search_form" ).off('submit').submit() } Sample 2. Will not account for the user pressing Enter once value has been entered into the text box. The method i got to work was creating a brand new form after successful ajax call and submit that. – Leo505 Jul 12 '18 at 16:59
@Leo505 Sample 2...agree, and removed. Sample 1...well, as you can see in my above sample it works just fine. – Asons Jul 12 '18 at 17:02
@LGSon - Yup. I agree. Your answer works and there is no reason why it should not work for me. But it does not. I have seen across a few other submissions that some people are having the same problem. They resorted to async: false. I resorted to the dirty, new form creation and submission. Thank a lot for your help. – Leo505 Jul 12 '18 at 17:19
@Leo505 Please, if you want, provide a e.g. fiddle of your non-working version of the above code sample, and I'll have a look. – Asons Jul 12 '18 at 17:25

Jquery Ajax - Use event within an ajax callback function

1 Answers1