web-dev-qa-db-fra.com

Passer une variable supplémentaire lors de la soumission d'un formulaire à l'aide de jQuery

J'ai un formulaire dans lequel le bouton Soumettre ne se trouve pas entre les balises <form>. Le bouton d'envoi a un gestionnaire click pour soumettre le formulaire via l'événement submit() de jQuery. Cela fonctionne parfaitement.

Cependant, j'ai besoin que la valeur du bouton Soumettre soit postée. Comme le bouton n'existe pas dans les balises <form>, il n'est pas inclus dans le tableau POST. Par conséquent, je dois trouver un moyen de passer une variable supplémentaire lors de la soumission du formulaire.

Certaines stipulations sur ce qui ne peut arriver pour y parvenir incluent:

  • Le bouton Soumettre ne peut pas être déplacé dans les balises <form>.
  • Il ne peut pas utiliser les méthodes jQuery ajax, post ou get.
  • Il ne peut pas avoir de champs input cachés ni de boutons de soumission masqués par CSS.
  • Le formulaire doit agir exactement comme s'il y avait un bouton Soumettre normal dans le formulaire.

J'ai envisagé quelque chose comme, mais évidemment cela ne fonctionne pas.

$('#admin_form').submit({'variable_name', 'true'});

Quelqu'un a une idée sur la façon dont je pourrais y arriver?

jqueryformspost
20
Michael Irigoyen

Une chose à faire est d'utiliser l'attribut onsubmit pour que javascript injecte un champ de publication dans le formulaire avec la valeur du bouton de soumission à droite lors de sa soumission. Vous devez le faire avec un champ de saisie masqué, mais vous n'ajoutez le champ de saisie que lorsque l'utilisateur a cliqué sur le bouton d'envoi. Le champ de saisie n'y serait donc pas présent depuis le début (j'espère que cela répond à vos besoins. ). Donc, quelque chose comme:

 function submitHandler()
 {
     submitVal = $('#submitButton').val();
     $('#myForm').append("<input type='hidden' name='submitValue' value='"+
                         submitVal+"' />");
     return true;
 }

Ce qui resterait dans la valeur supplémentaire au moment où le bouton a été cliqué.

35
Jesse Cohen

Cela semble être une vieille question, mais comme je venais juste de rencontrer un problème similaire et de trouver une bonne solution (pour moi), je pensais la poster:

 $('#admin_form').trigger('submit', [ { 'variable_name': true } ]);

ou

$('#admin_form').trigger('submit', [ 'variable_name', 'true' ]);

selon que vous voulez ou non transmettre une variable appelée variable_name avec la valeur true ou 2 variables distinctes.

Et juste pour être clair, cela ne va bien sûr pas soumettre automatiquement variable_name avec le reste des champs du formulaire, mais si vous avez un gestionnaire de soumission, comme je le fais dans jQuery, les variables seront transmises en tant qu'arguments, après l'événement.

3
AsGoodAsItGets

La réponse de Jesse est le seul moyen d'accomplir cela via POST. Vous pouvez également ajouter la variable à la valeur d'action du formulaire, mais ce serait en transmettant ce paramètre via GET au lieu de POST. Sans entrée masquée ajoutée au formulaire avant d'autoriser l'action "Envoyer" du navigateur par défaut, il est impossible d'accéder aux données de publication brutes de la demande HTTP avant qu'elles soient envoyées. C'est un problème avant le dilemme Egg. l’intention de le faire est de modifier les données/en-têtes HTTP POST qui sont envoyés à la page suivante, mais le seul moyen de conserver les données avant que le navigateur ne les publie sur la page suivante élément de formulaire.

Une autre solution consiste à utiliser la fonction $ .post () pour envoyer les données de votre choix par la poste pendant le gestionnaire onsubmit, puis dans le gestionnaire de réussite rediriger vers la page souhaitée. Je sais que cela ne va pas selon les règles ci-dessus, mais est une autre solution possible à un problème néanmoins.

Si vous voulez devenir vraiment fou et suivre toutes vos règles, vous pouvez également:

  1. "clone" une version cachée du formulaireau DOM 
  2. injecter le bouton submit dans le formulaire 
  3. déclencher un événement aclick sur le bouton submit injecté du formulaire cloné.
1
streetlogics

Si vous voulez le faire directement à partir d'un élément qui a été modifié sans écrire de gestionnaire d'envoi, ceci fonctionne:

<script>
$(function() {
  $( ".datePicker" ).datepicker({ 
      dateFormat: 'dd-M-yy',
      onSelect: function (date) {   
        $('#dateChanger').append("<input type='hidden' name='changed_" + $(this).attr("name") + "' value='" + $(this).attr("value") + "' />");    
        $("#dateChanger").submit();
  }
  });
});
</script>
0
Helen Connole

Sur jquery 1.11.1

J'ai réussi comme ça:

$(yourForm).on('submit',{'yourExtraData':extraData},function(event){
        alert('your extra data ' + event.data['yourExtraData'] + ' went thru');
});

Vérifiez également: https://api.jquery.com/event.data/

0
nyluje