Comment ajouter une soumission AJAX invisible sur mon formulaire déclenchée par des mises à jour de champs en entrée, tout en préservant la soumission naturelle?

Question

Salutations gentilles communauté de développeurs sages !! C'est la première fois que j'écris et j'ai regardé autour mais hélas, je suis coincé et j'ai besoin d'aide. Je serais très reconnaissant à toutes les bonnes âmes qui peuvent aider.

Ma forme doit faire 2 choses:

1) comportons comme une forme normale, et présenter des lignes de noms de produits, les prix unitaires et les quantités, lorsque ce bouton est enfoncé (ce qui est déjà en place).

2) Proposez les lignes de noms de produits, les prix unitaires et des quantités dans les coulisses (jQuery? AJAX?), Déclenchées par un changement dans l'une des lignes de produit, utilisez alors la réponse JSON mettre à jour un certain affichage sortie au bas de la page. La réponse JSON provient du serveur. Cette URL "action" est différente de celle de (1). J'ai juste besoin de savoir comment configurer les liaisons ou la fonction (s) prête (s) ou l'auditeur (s) ou tout ce que vous les appelez ces jours-ci, pour faire ce travail.

Toute aide serait grandement appréciée et me sauver de l'énorme fosse noire dans laquelle je me bats actuellement.

Merci!

Cheers,

Gene

Answer 1

Je soumettrais les données d'abord via AJAX puis soumettrait le formulaire normal. Quelque chose comme ça dans jQuery:

<form method="POST" action="action.php" id="myform"> 
<input type="text" name="product_name" value="" /> 
... Other form elements ... 
<input type="submit" id="submit_button" value="Submit" /> 
</form> 

<script> 
$('#myform').submit(function() { 
    // Disable the submit button. 
    $('#submit_button').attr('disabled', 'disabled'); 
    var data = new Array(); 
    ... Iterate form values to submit to secondary action and add to data ... 
    // action2.php also accepts form data, encoded as JSON, XML, etc. 
    $.post('action2.php', data, function() { 
    // Submit the form _for real_ in the callback function. 
    $('#myform').submit(); 
    }); 
    return false; // prevents normal form submission 
}); 
</script> 

Cela donne l'idée approximative de ce qui serait nécessaire. Montrer une animation de 'chargement' pendant la soumission à action2.php serait une bonne idée.

Answer 2

Cela devrait être facile à faire, mais je vois un gros problème: Envoi de la forme la voie normale conduit à la page en cours de déchargement. Toute demande AJAX émise en même temps pourrait pas encore passé, vous n'avez aucun moyen de le dire.

De plus, lorsque le formulaire est soumis normalement, il n'y aura plus de bas de la page pour afficher quoi que ce soit, étant donné que vous êtes déjà en route vers la page suivante.

Est-il possible de rester sur la même page pour les deux actions? Vous pourriez faire la soumission normale dans un IFRAME invisible par exemple, si vous ne voulez pas l'Ajaxifier.

Answer 3

Cette fonction peut être appelée par le déclencheur onChange() des champs de saisie du formulaire.

<script> 

    function update_subtotals_display() { 

     $.post(
      'update_subtotals_display_action_page.php', // alt action target 
      $('#form').children(), // sends over the form's inputs 
      function(result) { // what to do with the result from the target output 
       alert(result); // rest of it needs to be fleshed out here 
      } 
     ); 

    } 

</script>