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

J'ai un formulaire dans lequel le bouton "Soumettre" ne pas s'asseoir à l'intérieur de la <form> balises. Le bouton soumettre a un click gestionnaire de soumettre le formulaire via jQuery submit() événement. Cela fonctionne parfaitement.

Cependant, j'ai besoin de la valeur du bouton Soumettre pour être POST ed ainsi. Depuis le bouton n'existe pas au sein de la <form> étiquettes, il n'est pas inclus dans le POSTE de tableau. Donc, j'ai besoin de concevoir un moyen de passer une variable supplémentaire lorsque le formulaire est soumis.

Certaines dispositions sur ce qui ne peut pas se produire pour parvenir à cette fin comprennent:

  • Le bouton "Soumettre" ne peut pas être déplacé à l'intérieur de la <form> balises.
  • Il ne peut pas utiliser le jQuery ajax, post, ou get méthodes.
  • Il ne peut pas avoir caché input champs ou de soumettre des boutons cachés par les CSS.
  • Le formulaire doit agir exactement comme si il était normal d'un bouton de soumission du formulaire.

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

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

Quelqu'un a des idées sur comment je pourrais faire?

InformationsquelleAutor Michael Irigoyen | 2011-02-23
  1. 35

    Une chose que vous pourriez faire est d'utiliser la onsubmit attribut javascript injecter un poste de champ dans le formulaire, la valeur du bouton "soumettre" droit tel qu'il est présenté. Que vous avez à faire cela avec un champ caché, mais vous devez seulement ajouter le champ de saisie à droite après que l'utilisateur a cliqué sur le bouton soumettre, à savoir le champ de saisie n'existerait pas là depuis le début (j'espère que cela répond à vos exigences). Donc quelque chose comme:

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

    Qui resterait dans le supplément de valeur que le bouton a été cliqué.

    InformationsquelleAutor Jesse Cohen
  2. 3

    Ce qui semble être une vieille question, mais depuis que j'ai juste rencontré un problème similaire et a trouvé une bonne solution (pour moi), je pensais que je poste ça:

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

    ou

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

    en fonction de si vous voulez passer une variable appelée variable_name avec la valeur true ou vous souhaitez passer 2 variables distinctes.

    Et juste pour être clair, ce ne sera pas automatiquement soumettre variable_name avec le reste des champs de formulaire, mais si vous avez un gestionnaire de soumission, comme je le fais dans jQuery, les variables seront passés comme arguments, après l'événement.

    • J'ai essayé cette syntaxe exacte et la variable n'a pas été adopté
    • Avez-vous un gestionnaire de soumission pour la forme? c'est à dire quelque chose comme $('#admin_form').on('submit', function() { ... });
    • Il fonctionne très bien, merci! $(form_selector).trigger('submit', [{ 'show_again': true }]); /* -- */ $(le formulaire).submit(function (e, show_again) {});
    • suis désolé, je n'ai pas l'obtenir pour le gestionnaire de soumission. ce que ces paramètres veux dire ? function (e, show_again) en live exemple s'il vous plaît ?
    • si vous avez un gestionnaire de soumission sur la forme, par exemple, comme je l'ai écrit dans mon commentaire ci-dessus, lorsque vous déclenchez l'événement submit comme je l'ai écrit dans ma réponse, les variables seront transmis à votre gestionnaire. Je n'ai pas un exemple vivant, désolé.
    InformationsquelleAutor AsGoodAsItGets
  3. 1

    De Jesse réponse est la seule façon d'y parvenir par la POSTE. Vous pouvez également ajouter une variable à la forme de la valeur de l'action, mais qui seraient de passage que les param via GET au lieu de POST. Sans cachés entrée annexe au formulaire avant d'autoriser le navigateur par défaut "soumettre" action, il n'y a aucun moyen d'accéder à la crue publier des données de la requête HTTP, avant il a été présenté - c'est un poulet avant de le dilemme de l'oeuf - ce que vous avez l'intention de faire est de changer les données HTTP POST/en-têtes envoyés à la page suivante, mais la seule façon qu'il existe des données avant le navigateur affichant les données de la page suivante, c'est d'avoir l'entrée balises imbriquées à l'intérieur de l'élément de formulaire.

    Une solution alternative, vous pourriez aller avec serait d'utiliser le $.post() permet d'envoyer toutes les données que vous voulez par la poste au cours de la onsubmit gestionnaire, et dans le gestionnaire de succès rediriger vers la page que vous souhaitez. Je sais que cela ne va pas selon les règles ci-dessus, mais il est une autre solution possible à un problème n'en est pas moins.

    Si vous souhaitez obtenir une vraie folle bien et suivez toutes vos règles, vous pouvez également:

    1. "clone" cachée version la forme
      pour les DOM
    2. injecter le soumettre
      bouton dans le formulaire
    3. déclencher une
      cliquez sur l'événement sur le injecté soumettre
      bouton dans la cloné forme.
    InformationsquelleAutor streetlogics
  4. 0

    Si vous voulais le faire directement à partir d'un élément qui a été modifié sans l'écriture d'un gestionnaire de soumission, cela 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>
    • Que voudrais ajouter un nouveau input élément à chaque fois une sélection qui se passe. Si quelqu'un a modifié la date, plusieurs fois (disons 3 fois), vous aurez un supplément de 3 cachée input éléments insérés dans le DOM qui pourrait vous mettre en place pour plus de problèmes.
    InformationsquelleAutor Helen Connole
  5. 0

    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');
});

    A lire également: https://api.jquery.com/event.data/

    InformationsquelleAutor nyluje