Formulaire sur Soumettre détermine quel bouton d'envoi a été utilisé

Question

Formulaire sur Soumettre détermine quel bouton d'envoi a été utilisé

Demandé el 26 de Août, 2010: Quand la question a-t-elle été
38618 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Comment puis-je obtenir le bouton qui a provoqué l'envoi à partir de l'événement de soumission du formulaire ? (5 réponses )

J'ai un formulaire avec deux boutons submit, et un peu de code:

HTML:

<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />

Javascript:

form.onSubmit = function(evnt) {
    // Do some asyncrhnous stuff, that will later on submit the form
    return false;
}

Bien sûr, les deux boutons submit accomplir des choses différentes. Est-il un moyen de savoir en onSubmit quel bouton a été pressé, donc plus tard, je pouvais envoyer en effectuant thatButton.click()?

Idéalement, je voudrais pas de modifier le code pour les boutons, juste une pure javascript addon qui a ce comportement.

Je sais que FF a evnt.explicitOriginalTarget mais je ne trouve rien pour les autres navigateurs.

Demandé el 26 de Août, 2010 par McTrafik

Answer 1

5 Réponses

Answer 2

69voto

JohnS Points 3434

<form onsubmit="alert(this.submited); return false;">
    <input onclick="this.form.submited=this.value;" type="submit" value="Yes" />
    <input onclick="this.form.submited=this.value;" type="submit" value="No" />
</form>

Répondu el 23 de Juin, 2011 par JohnS (3434 Points )

Answer 3

43voto

Peter Bailey Points 62125

Pas dans le gestionnaire d’événement submit lui-même, non.

Mais ce que vous pouvez faire est d’ajouter des gestionnaires de clics à chaque soumission, ce qui indiquera au gestionnaire de soumission les objets sur lesquels vous avez cliqué.

Voici un exemple complet (en utilisant jQuery pour la brièveté)

 <html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    var submitActor = null;
    var $form = $( '#test' );
    var $submitActors = $form.find( 'input[type=submit]' );

    $form.submit( function( event )
    {
      if ( null === submitActor )
      {
        // If no actor is explicitly clicked, the browser will
        // automatically choose the first in source-order
        // so we do the same here
        submitActor = $submitActors[0];
      }

      alert( submitActor.name );

      return false;
    });

    $submitActors.click( function( event )
    {
      submitActor = this;
    });

  } );

  </script>
</head>

<body>

  <form id="test">

    <input type="text" />

    <input type="submit" name="save" value="Save" />
    <input type="submit" name="saveAndAdd" value="Save and add another" />

  </form>

</body>
</html>

Répondu el 26 de Août, 2010 par Peter Bailey (62125 Points )

Answer 4

28voto

Henrik Points 47

Os nus, mais travail confirmé, exemple:

 <script type="text/javascript">
var clicked;
function mysubmit() {
    alert(clicked);
}
</script>
<form action="" onsubmit="mysubmit();return false">
    <input type="submit" onclick="clicked='Save'" value="Save" />
    <input type="submit" onclick="clicked='Add'" value="Add" />
</form>

Répondu el 8 de Avril, 2012 par Henrik (47 Points )

Answer 5

20voto

Ben Gripka Points 4885

Toutes les réponses ci-dessus sont très bonnes, mais je l'ai un peu nettoyé.

Cette solution place automatiquement le nom du bouton d'envoi pressé dans le champ caché de l'action. Le javascript de la page et le code du serveur peuvent vérifier la valeur du champ caché de l'action si nécessaire.

La solution utilise jQuery pour s’appliquer automatiquement à tous les boutons de soumission.

 <input type="hidden" name="action" id="action" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //when a submit button is clicked, put its name into the action hidden field
        $(":submit").click(function () { $("#action").val(this.name); });
    });
</script>
<input type="submit" class="bttn" value="<< Back" name="back" />
<input type="submit" class="bttn" value="Finish" name="finish" />
<input type="submit" class="bttn" value="Save" name="save" />
<input type="submit" class="bttn" value="Next >>" name="next" />
<input type="submit" class="bttn" value="Delete" name="delete" />
<input type="button" class="bttn" name="cancel" value="Cancel" onclick="window.close();" />

Puis écrivez un code comme celui-ci dans votre gestionnaire de soumission de formulaire.

  if ($("#action").val() == "delete") {
     return confirm("Are you sure you want to delete the selected item?");
 }

Répondu el 2 de Mai, 2012 par Ben Gripka (4885 Points )

Answer 6

8voto

Dutchie432 Points 16305

Première Suggestion:

Créer une Variable Javascript qui référence le bouton cliqué. Appelons cela buttonIndex

<input type="submit" onclick="buttonIndex=0;" name="save" value="Save" />
<input type="submit" onclick="buttonIndex=1;" name="saveAndAdd" value="Save and add another" />

Maintenant, vous pouvez accéder à cette valeur. 0 signifie que le bouton de sauvegarde a été cliqué, 1 signifie que le saveAndAdd Bouton a été cliqué.

Deuxième Suggestion

La façon dont je voudrais résoudre ce problème est de créer deux JS fonctions qui gèrent chacun des deux boutons.

Tout d'abord, assurez-vous que votre formulaire a un ID valide. Pour cet exemple, je vais dire l'ID est "myForm"

changement

<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />

pour

<input type="submit" onclick="submitFunc();return(false);" name="save" value="Save" />
<input type="submit" onclick="submitAndAddFunc();return(false);" name="saveAndAdd" value="Save and add

le return(false) permettra d'éviter votre formulaire de soumission de traitement en fait, et appeler vos propres fonctions, où vous pouvez soumettre le formulaire plus tard.

Ensuite, vos fonctions seront de travailler sur quelque chose comme ça...

function submitFunc(){
    // Do some asyncrhnous stuff, that will later on submit the form
    if (okToSubmit) {
        document.getElementById('myForm').submit();
    }
}
function submitAndAddFunc(){
    // Do some asyncrhnous stuff, that will later on submit the form
    if (okToSubmit) {
        document.getElementById('myForm').submit();
    }
}

Répondu el 26 de Août, 2010 par Dutchie432 (16305 Points )

Formulaire sur Soumettre détermine quel bouton d'envoi a été utilisé

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Formulaire sur Soumettre détermine quel bouton d'envoi a été utilisé

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: