Wie mache ich ein Formular warten auf Ajax zu beenden, bevor es übermittelt?

Question

So gibt es ein Formular, das ich nur senden möchte, wenn eine Bedingung aus der Datenbank mit Ajax überprüft wird. Ich verwende preventDefault() Methode, wenn die Bedingung wahr ist, d. H. Wenn ein Benutzer kein Resident ist, wird eine Variable in ajax successs function auf True gesetzt und preventDefault() wird jedoch aufgerufen, wenn das Formular immer übermittelt. Es wartet nicht darauf, dass der Ajax beendet wird, selbst wenn async auf false gesetzt ist. Hier ist der 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(); 
    } 
    }); 

Answer 1

das wird nicht funktionieren. Der Erfolg wird Feuer nach:

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

Wie es ist asynchron. Sie müssen immer auf den Button klicken Abbrechen dann senden Sie das Formular einmal Erfolg getroffen wird:

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

    });