$ .post() n'a pas le temps de s'exécuter?

Question

J'essaie d'envoyer des données d'un formulaire à un script externe avant de soumettre le formulaire, mais je n'arrive pas à obtenir les données pour atteindre le script externe, sauf si je return false; sur le formulaire lui-même.

$(document).ready(function() { 

    // Handle Form-Submission 
    $("#mainForm").submit(function() { 

    // Reset Error Array 
    errors = new Array(); 

    /* Validation Code Removed - Not Relevant */   

    // Check if errors exist 
    if (errors.length > 0) { 
     return false; 
    } else { 
     $("div.errors").html(""); 
     $.post("post.php",{ 
     "First Name": name_first.val(), 
     "Last Name": name_last.val(), 
     "Home State": home_state.val(), 
     "Primary Email": email_primary.val() 
     }); 
    } 
    return false; /* Remove this line, and the $.post won't work. */ 
    }); 
}); 

Answer 1

J'ai rencontré exactement le même problème aujourd'hui. Comme Marc le dit, c'est parce que l'appel ajax est asynchrone. La solution la plus simple est de le rendre synchrone.

Utilisation .ajaxSetup() avant tout appel ajax comme tels:

$.ajaxSetup({async: false}); 

Answer 2

Envoi à deux points d'extrémité

Je voudrais essayer quelque chose comme ça au lieu d'utiliser async: true. Bien qu'il soit nettement plus compliqué, il ne gèlent pas l'interface .:

$(document).ready(function(){   
    // Handle Form-Submission 
$("#mainForm").submit(function(e){ 
    e.preventDefault(); 
    var $form = $(this); 

    if($form.data('submitting')) return; // Avoid double submissions 
    $(':submit').attr('disabled','disabled'); // Disable the submit button 

    // Reset Error Array 
    errors = new Array(); 

    /* Validation Code Removed - Not Relevant */   

    // Check if errors exist 
    if (errors.length > 0) {; 
     $(':submit').removeAttr('disabled'); // Enable the submit button 
     return false; 
    } else { 
     $("div.errors").html(""); 
     $form.data('submitting',true); // Flag that a submission has started 
     $.post("post.php",{ 
     "First Name":name_first.val(), 
     "Last Name":name_last.val(), 
     "Home State":home_state.val(), 
     "Primary Email":email_primary.val()}, 
     function(){ 
      // remove our special handler and submit normally 
      $form.unbind('submit').submit(); 
     } 
    ); 
    } 
    }); 
}); 

Réponse originale

Il semble que votre raccrochage est que vous voulez utiliser $.post si JavaScript est activé, mais laisser la forme fonctionne normalement avec JavaScript désactivé.

Cependant, depuis aucune de votre JavaScript fonctionnera si elle est désactivé vous n'avez pas à vous soucier de modifier le comportement de la fonction submit.

Vous pouvez laisser votre déclaration return false;, ou utiliser

$("#mainForm").submit(function(e){ 
    // all your existing code 

    e.preventDefault(); 
} 

qui gardera la forme de soumettre normalement et sera au lieu d'utiliser votre méthode $.post lorsque JavaScript est activé . Si c'est désactivé, il se présentera normalement.

preventDefault est préférable à return false si vous souhaitez que les bulles d'événements continuent normalement, mais que l'action par défaut du navigateur ne se poursuive pas. return false est l'équivalent de l'appel e.preventDefault(); e.stopPropagation();