Come fare un modulo attendere che ajax finisca prima di inviarlo?

Question

Quindi c'è un modulo che voglio inviare solo quando una condizione viene verificata dal database usando ajax. Sto usando il metodo preventDefault() se la condizione è vera, vale a dire se un utente non è residente, una variabile è impostata su true in ajax successs function e preventDefault() viene chiamata, tuttavia, quando lo fa, il modulo viene sempre inviato. Non aspetta che l'ajax finisca anche quando async è impostato su false. Ecco il codice.

$('#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(); 
    } 
    }); 

Answer 1

che non funzionerà. Il successo sparerà dopo:

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

Come è asincrona. È necessario annullare sempre il tasto scatto poi inviare il modulo una volta il successo è colpito:

$('#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(); 

    });