appeler javascript à partir d'un formulaire html

Je Base ma question et mon exemple sur la réponse de Jason dans cette question

j'essaie d'éviter d'utiliser un eventListner, et juste d'appeler handleClick onsubmit, quand le bouton Soumettre est cliqué.

il ne se passe absolument rien avec le code que j'ai.

pourquoi handleClick n'est-il pas appelé?

<html>
  <head>
    <script type="text/javascript">
      function getRadioButtonValue(rbutton)
      {
        for (var i = 0; i < rbutton.length; ++i)
        { 
          if (rbutton[i].checked)
            return rbutton[i].value;
        }
        return null;
      }

      function handleClick(event)
      {
        alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"]));
        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
    <form name="myform" onSubmit="JavaScript:handleClick()">
      <input name="Submit"  type="submit" value="Update" onClick="JavaScript:handleClick()"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>
</body>
</html>

edit:

s'il vous Plaît ne suggèrent pas un cadre comme solution.

Voici les modifications pertinentes que j'ai apportées au code, ce qui donne le même comportement.

      function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing'])));
        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
<form name="aye">;
      <input name="Submit"  type="submit" value="Update" action="JavaScript:handleClick()"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>
43
demandé sur Community 2009-03-26 00:18:47
la source

5 ответов

dans ce bit de code:

getRadioButtonValue(this["whichThing"]))

vous n'avez aucune référence à quoi que ce soit. Par conséquent, votre radiobutton dans la fonction getradiobuttonvalue n'est pas défini et lancer une erreur.

EDIT Pour obtenir la valeur des boutons radio, saisissez la bibliothèque JQuery , puis utilisez ceci:

  $('input[name=whichThing]:checked').val() 

Edit 2 En raison de la désir de réinventer la roue, voici le code non-Jquery:

var t = '';
for (i=0; i<document.myform.whichThing.length; i++) {
     if (document.myform.whichThing[i].checked==true) {
         t = t + document.myform.whichThing[i].value;
     }
}

ou, fondamentalement, modifier la ligne de code originale pour lire ainsi:

getRadioButtonValue(document.myform.whichThing))

Modifier 3 Voici vos devoirs:

      function handleClick() {
        alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
        //event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
<form name="aye" onSubmit="return handleClick()">
     <input name="Submit"  type="submit" value="Update" />
     Which of the following do you like best?
     <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
     <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
     <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>

notez ce qui suit, j'ai déplacé l'appel de fonction à l'événement" onSubmit " du formulaire. Une alternative serait de changer votre bouton Soumettre à un bouton standard, et de le mettre dans l'événement OnClick pour bouton. J'ai également supprimé le "JavaScript" inutile devant le nom de la fonction, et ajouté un retour explicite sur la valeur sortant de la fonction.

dans la fonction elle-même, j'ai modifié la façon dont on accédait au formulaire. La structure est: document.[LE NOM DU FORMULAIRE].[Le nom de contrôle] pour obtenir des choses. Depuis que vous avez renommé votre de aye, vous avez dû modifier le document.myform. documenter.aye. En outre, le document.aye ["whything"] est tout simplement erroné dans ce contexte, car il devait être document.aye.quoi que ce soit .

le dernier bit, était j'ai commenté l'événement .preventDefault (); . cette ligne n'était pas nécessaire pour cet échantillon.

EDITION 4 Juste pour être clair. document.aye ["whatthing"] vous donnera un accès direct à la valeur sélectionnée, mais document.aye.whatthing vous donne accès à la collection de boutons radio que vous devez ensuite vérifier. Puisque vous utilisez la fonction "getRadioButtonValue(object)" pour itérer à travers la collection, vous devez utiliser le document .aye. .

voir la différence dans cette méthode:

function handleClick() {
   alert("Direct Access: " + document.aye["whichThing"]);
   alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
   return false; // prevent further bubbling of event
}
27
répondu Stephen Wrighton 2017-06-14 18:39:55
la source

vous pouvez utiliser le formulaire d'url javascript avec

<form action="javascript:handleClick()">

ou utiliser onSubmit event handler

<form onSubmit="return handleClick()">

dans la forme ultérieure, si vous retournez false à partir du clic manuel, Cela empêchera la procédure de soumission normale. Retourner true si vous voulez que le navigateur suive la procédure de soumission normale.

votre gestionnaire d'événements onSubmit dans le bouton échoue aussi à cause de la Javascript: part

EDIT: Je viens d'essayer ce code et il fonctionne:

<html>
  <head>
    <script type="text/javascript">

      function handleIt() {
        alert("hello");
      }

    </script>
  </head>

<body>
    <form name="myform" action="javascript:handleIt()">
      <input name="Submit"  type="submit" value="Update"/>
    </form>
</body>
</html>
54
répondu Miquel 2009-03-26 02:12:52
la source

Joli exemple de Miquel (#32) doit être rempli:

<html>
 <head>
  <script type="text/javascript">
   function handleIt(txt) {   // txt == content of form input
    alert("Entered value: " + txt);
   }
  </script>
 </head>
 <body>
 <!-- javascript function in form action must have a parameter. This 
    parameter contains a value of named input -->
  <form name="myform" action="javascript:handleIt(lastname.value)">  
   <input type="text" name="lastname" id="lastname" maxlength="40"> 
   <input name="Submit"  type="submit" value="Update"/>
  </form>
 </body>
</html>

et le formulaire doit avoir:

<form name="myform" action="javascript:handleIt(lastname.value)"> 
7
répondu K.David 2016-11-17 17:38:24
la source

il y a quelques choses à changer dans votre version modifiée:

  1. vous avez pris la suggestion d'utiliser document.myform['whichThing'] un peu trop littéralement. Votre forme est appelée "aye", donc le code pour accéder aux boutons de radio whything devrait utiliser ce nom: `document.aye ['whatthing'].

  2. il n'existe pas d'attribut action pour l'étiquette <input> . Utilisez onclick à la place: <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>

  3. obtenir et annuler un objet événement dans un navigateur est un processus très complexe. Il varie beaucoup selon le type de navigateur et la version. IE et Firefox gèrent ces choses très différemment, donc un simple event.preventDefault() ne fonctionnera pas... en fait, la variable event ne sera probablement même pas définie car il s'agit d'un handler onclick d'une balise. C'est pourquoi Stephen ci-dessus s'efforce de proposer un cadre. Je me rends compte que vous voulez connaître la mécanique, et je je recommande google pour cela. Dans ce cas, comme une solution de rechange simple, utilisez return false dans l'étiquette onclick comme dans le numéro 2 ci-dessus (ou retourner false de la fonction comme stephen suggéré).

  4. à cause du #3, débarrassez-vous de tout ce qui n'est pas la déclaration d'alerte dans votre handler.

le code devrait maintenant ressembler à:

function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing']));
      }
    </script>
  </head>
<body>
    <form name="aye">
      <input name="Submit"  type="submit" value="Update" onclick="handleClick();return false"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>
1
répondu Jarret Hardie 2009-03-26 20:58:11
la source

Supprimer javascript: de onclick=".. , onsubmit=".. déclarations

javascript: le préfixe est utilisé seulement dans href="" ou attributs similaires (non liés aux événements)

0
répondu Konstantin Tarkus 2014-07-15 04:34:06
la source