Jak sprawić, aby formularz czekał, aż ajax się skończy, zanim zostanie przesłany?

Question

Więc istnieje formularz, który chcę przesłać tylko wtedy, gdy warunek jest weryfikowany z bazy danych za pomocą ajax. Używam metody preventDefault(), jeśli warunek jest spełniony, tzn. Jeśli użytkownik nie jest rezydentem, zmienna jest ustawiana na wartość true w ajax successs function, a preventDefault() jest wywoływana, jednak w tym przypadku formularz zawsze przesyła. Nie czeka na zakończenie ajax, nawet jeśli async ma wartość false. Oto kod.

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

która nie zadziała. Sukces będzie ogień po:

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

Jak to asynchroniczny. Trzeba zawsze anuluj kliknięcie następnie przesłać formularz po sukces jest 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(); 

    });