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

. Le bouton d’envoi a un gestionnaire de 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

, 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
    .
  • Il ne peut pas utiliser les méthodes jQuery ajax , post ou get .
  • Il ne peut pas avoir de champs de input masqué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 parvenir?

Une chose que vous pouvez faire est d’utiliser l’atsortingbut onsubmit pour que javascript injecte un champ de publication dans le formulaire avec la valeur du bouton d’envoi tel qu’il est soumis. 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(""); return true; } 

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

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

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

ou

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

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

Et pour que tout soit clair, cela ne va bien sûr pas soumettre automatiquement nom_variable avec le rest des champs du formulaire, mais si vous avez un gestionnaire d’envoi, comme je le fais dans jQuery, les variables seront transmises en tant qu’arguments, après l’événement.

La réponse de Jesse est le seul moyen d’accomplir cela via POST. Vous pouvez également append la variable à la valeur d’action du formulaire, mais ce serait en transmettant ce paramètre via GET au lieu de POST. Sans une 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. Il s’agit d’une poule avant le dilemme de l’œuf. L’intention de le faire est de changer les données / en-têtes HTTP POST qui sont envoyés à la page suivante, mais la seule façon que des données existent avant que le navigateur n’envoie les données à la page suivante consiste à incorporer les balises d’entrée dans l’élément de formulaire.

Une autre solution consiste à utiliser la fonction $ .post () pour envoyer toutes les données souhaitées par la poste pendant le gestionnaire onsubmit et, dans le gestionnaire de succès, redirect 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 formulaire dans le DOM
  2. injecter le bouton d’envoi dans le formulaire
  3. déclencher un événement de clic sur le bouton d’envoi injecté sous la forme clonée.

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

  

Sur jquery 1.11.1

Je l’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/