web-dev-qa-db-fra.com

Modifier POST vars avant publication, en utilisant jQuery

J'ai un formulaire et un gestionnaire de soumission dans jQuery.

Lorsque l'utilisateur soumet le formulaire, je souhaite modifier (ajouter) certains paramètres à la demande POST, avant qu'elle ne soit envoyée du client au serveur).

c'est à dire.

  1. L'utilisateur clique sur "soumettre"
  2. L'exécution de mon dossier de soumission jQuery commence ...
  3. Je crée de nouvelles paires clé/valeur et les ajoute à la charge utile POST

Pour le moment, il semble que mes seules options soient d'utiliser $.post() ou $('form').append('<input type="hidden" name=... value=...');

Merci pour toute aide.

Modifier: j'ai déjà joint un gestionnaire d'envoi au formulaire; J'essaie de modifier les post-var entre l'utilisateur qui clique sur le bouton Soumettre et la demande envoyée au serveur.

jqueryformspost
40
aidan

Utilisez la fonction submit() sur le formulaire pour créer un rappel. Si la fonction retourne vrai, le formulaire sera soumis; s'il est faux, le formulaire ne sera pas publié.

$('#theForm').submit(function() {
    $("#field1").val(newValue1);
    $("#field2").val(newValue2);
    $(this).append(newFormField);
    return true;
});

etc.

43
keithjgrant

Vue de haut niveau:
Lorsqu'un formulaire est soumis en mode natif, il s'agit de la toute dernière opération effectuée par un navigateur et il est exécuté en dehors de la portée du moteur de rendu/interpréteur javascript.

Toute tentative d'interception de la demande POST ou GET réelle via JavaScript est impossible car cette demande Web traditionnelle se produit exclusivement entre le moteur de navigation et le sous-système de mise en réseau.

Solution moderne:
Il est de plus en plus courant pour les développeurs Web de soumettre des données de formulaire à l'aide de XMLHttpRequest - une API de navigateur Web qui permet à l'interprète JavaScript d'accéder au sous-système de mise en réseau du navigateur.
This is commonly referred to as Ajax

Une utilisation simple mais courante de ceci ressemblerait à quelque chose comme:

<html>
  <form id="myForm" onsubmit="processForm()">
   <input type="text" name="first_name"/>
   <input type="text" name="last_name"/>
   <input type="submit" value="Submit">
  </form>

  <!--Using jQuery and Ajax-->
  <script type="text/javascript">
    /**
     * Function is responsible for gathering the form input data, 
     * adding additional values to the list, and POSTing it to the
     * server via Ajax.
     */
    function processForm() {
      //Retreive the data from the form:
      var data = $('#myForm').serializeArray();

      //Add in additional data to the original form data:
      data.Push(
        {name: 'age',      value: 25},
        {name: 'sex',      value: 'M'},
        {name: 'weight',   value: 200}
      );

      //Submit the form via Ajax POST request:
      $.ajax({
        type: 'POST',
        url:  'myFormProcessor.php',
        data:  data,
        dataType: 'json'
      }).done(function(data) {
        //The code below is executed asynchronously, 
        //meaning that it does not execute until the
        //Ajax request has finished, and the response has been loaded.
        //This code may, and probably will, load *after* any code that
        //that is defined outside of it.
        alert("Thanks for the submission!");
        console.log("Response Data" +data); //Log the server response to console
      });
      alert("Does this alert appear first or second?");
    }
  </script>
</html>

Approche native: Avant l'existence de XMLHttpRequest, une solution consisterait à simplement ajouter toute donnée de formulaire supplémentaire directement au document.

En utilisant le même formulaire posté que ci-dessus, une méthode d'ajout jQuery pourrait ressembler à:

<html>
  <form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
    <input type="text" name="first_name"/>
    <input type="text" name="last_name"/>
    <input type="submit" value="Submit">
  </form>

 <script type="text/javascript">
  /**
   * Function is responsible for adding in additional POST values
   * by appending <input> nodes directly into the form.
   * @return bool - Returns true upon completion to submit the form
   */
  function processForm() {
    $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

    return true; //Submit the form now 
    //Alternatively you can return false to NOT submit the form.
  }
 </script>
</html>
19
user1893702

Je ne pense pas que vous puissiez modifier les vars POST de cette façon. Lorsqu'un gestionnaire de soumission s'exécute, il n'y a pas de hachage des données de formulaire qui existent vraiment que vous pouvez ajouter ou modifier. Je pense que vous '' re right - vos seules options pour $ .post () vous-même (ce que je recommanderais) ou pour ajouter des entrées cachées au formulaire (a la surcharge de modification DOM dont vous n'avez pas vraiment besoin).

3
boycy

Attachez un gestionnaire submit () au formulaire.

$('form#myForm').submit(myPostHandlingFunction);

Soumettez/rédigez ensuite le message de votre fonction. La chose la plus simple serait de simplement remplir quelques entrées cachées dans le formulaire, puis de retourner true pour permettre à la soumission de se produire si tout semble correct.

2
Tom

Je travaille sur cette question depuis un jour, et je trouve une bonne solution:

vous pouvez utiliser Jquery .clone () pour créer une copie du formulaire que vous souhaitez soumettre. Ensuite, vous pouvez effectuer les modifications sur la copie et enfin soumettre la copie.

2
Hao XU

Vous pouvez accrocher l'événement de clic du bouton d'envoi et y effectuer votre traitement. Pour les paires clé/valeur, vous pouvez essayer un élément de formulaire masqué.

0
Jay
$("#frm").submit(function (e) {
    e.preventDefault();
    form = document.getElementById("frm"); //$("#frm")

    $.each(form.elements, function (i, el) {
        el.name = your_new_name;
        el.value = your_new_value;
        //... //el.type, el.id ...
    });

    form.submit();

    return true;
});
0
Franco Ugarte