How to make a form wait for ajax to finish before it submits?

Question

So there is a form that i want to submit only when a condition is verified from the database using ajax. I am using preventDefault() method if the condition is true i.e. if a user is not a resident, a variable is set to true in ajax successs function and preventDefault() gets called, however, when doing this, the form always submits. It doesn't wait for the ajax to finish even when async is set to false. Here's the code.

  $('#button').click(function(e) {    
    if ($('#ca_resident').prop('checked') == true) { 
      amount=$('#user-amount').val().replace(/[,]/g,"");
      project_name=$('#project_name').val();
      var not_resident = false;
       $.ajax({
        url: '/main/verify_residence/',
        type: 'POST',
        aysnc: false,
        data: {
          value: amount,
          name: project_name
        },
        success: function(data){
          $("#verify_residence").html(data);
          not_resident = true;
        },
        dataType: 'html'
      }); 
    }
    if(not_resident){
      e.preventDefault();
    }
  });

prevent the default before calling the ajax and on `ajax.success` you can then `form.submit()` — Vogel612, Jul 04 '13 at 10:51
@Vogel612 I tried doing that before. this prevents form from submitting in any condition. The form should submit when a user doesn't fail residency check — wayne, Jul 04 '13 at 11:19

Liam · Accepted Answer · 2017-04-25T10:38:53.530

6

that won't work. Success will fire after:

if(not_resident){
      e.preventDefault();
    }

As it's asynchronous. You need to always cancel the button click then submit the form once success is hit:

$('#button').click(function(e) {    
   var $form = $(this).closest('form');   

   if ($('#ca_resident').prop('checked') == true) { 
      amount=$('#user-amount').val().replace(/[,]/g,"");
      project_name=$('#project_name').val();
       $.ajax({
        url: '/main/verify_residence/',
        type: 'POST',
        aysnc: false,
        data: {
          value: amount,
          name: project_name
        },
        success: function(data){
          $("#verify_residence").html(data);
          $form.submit();
        },
        dataType: 'html'
      }); 
    }


    e.preventDefault();

  });

edited Apr 25 '17 at 10:38

answered Jul 04 '13 at 10:51

Liam

27,717
28
128
190

thanks Liam, but what i need is if a user fails residence condition the form doesn't submit, exactly opposite. `e.preventDefault()` in the `success function`. still no luck – wayne Jul 04 '13 at 11:17
@user2488801 this will do that, if the `success` isn't hit. the form will not submit. `e.preventDefault();` stops the form always submitting. `$form.submit();` only posts when `success` is hit – Liam Jul 04 '13 at 11:46
`success` is a case when a user fails validation and is not allowed to see further, i.e. no form submission. – wayne Jul 04 '13 at 12:21
1

So success is actually failure?! interesting. So what happens when it actually succeeds? – Liam Jul 04 '13 at 12:29
A div shows up with "Sorry you can't register" message and then the form should stop submission – wayne Jul 04 '13 at 13:10

How to make a form wait for ajax to finish before it submits?

1 Answers1