web-dev-qa-db-fra.com

appelant javascript depuis un formulaire html

Je base ma question et mon exemple sur la réponse de Jason dans this question

J'essaie d'éviter d'utiliser un eventListner et d'appeler simplement handleClick onsubmit lorsque le bouton d'envoi est cliqué.

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

Pourquoi ne pas appeler handleClick?

<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>

modifier:

Veuillez ne pas suggérer un cadre comme solution.

Voici les modifications que j'ai apportées au code, ce qui entraîne 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>
javascripthtmljavascript-eventsforms
48
Joshxtothe4

Dans ce morceau de code:

getRadioButtonValue(this["whichThing"]))

vous n'obtenez en réalité une référence à rien. Par conséquent, votre bouton radio dans la fonction getradiobuttonvalue est indéfini et génère une erreur.

[~ # ~] modifier [~ # ~] Pour obtenir la valeur des boutons radio, récupérez la bibliothèque JQuery , et ensuite utiliser ceci:

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

Edit 2 En raison de la volonté 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, modifiez la ligne de code d'origine pour lire comme suit:

getRadioButtonValue(document.myform.whichThing))

Edit 3 Voici votre devoir:

      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 SUBMIT en un bouton standard et de le placer dans l'événement OnClick pour le bouton. J'ai également supprimé le "JavaScript" inutile devant le nom de la fonction et ajouté un RETOUR explicite à la valeur sortant de la fonction.

Dans la fonction elle-même, j'ai modifié le mode d'accès au formulaire. La structure est la suivante: document. [LE NOM DU FORMULAIRE]. [LE NOM DU CONTRÔLE] pour obtenir des résultats. Depuis que vous avez renommé votre de aye, vous avez dû changer le document.myform. à document.aye. De plus, le document.aye ["whichThing"] est tout simplement faux dans ce contexte, car il devait l'être document.aye.whichThing.

Le dernier bit, j’ai commenté le event.preventDefault (); . cette ligne n'était pas nécessaire pour cet échantillon.

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

Voyez 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
}
28
Stephen Wrighton

Vous pouvez soit utiliser le formulaire URL javascript avec

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

Ou utilisez le gestionnaire d'événement onSubmit

<form onSubmit="return handleClick()">

Dans le dernier formulaire, si vous renvoyez false à partir de handleClick, la procédure de soumission normale sera empêchée. Renvoie true si vous voulez que le navigateur suive la procédure de soumission normale.

Votre gestionnaire d’événements onSubmit dans le bouton échoue également à cause du Javascript: partie

EDIT: Je viens d'essayer ce code et cela 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>
64
Miquel

Le bel exemple de Miquel (# 32) devrait ê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 devrait avoir:

<form name="myform" action="javascript:handleIt(lastname.value)">
11
K.David

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 formulaire s'appelle "aye", le code pour accéder aux boutons radio whichThing doit donc utiliser ce nom: `document.aye ['whichThing'].

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

  3. L'obtention et l'annulation d'un objet Event dans un navigateur est un processus très complexe. Cela varie beaucoup selon le type de navigateur et la version. IE et Firefox gèrent ces choses très différemment, donc une simple event.preventDefault() _ ne fonctionnera pas ... en fait, la variable d'événement ne sera probablement même pas définie car elle est un gestionnaire onclick à partir d’un tag. C’est la raison pour laquelle Stephen s’efforce de proposer un framework. Je réalise que vous voulez connaître les mécanismes, et je vous recommande Google pour cela. Dans ce cas, utilisez la méthode return false Dans la balise onclick comme dans le numéro 2 ci-dessus (ou renvoie false à partir de la fonction suggérée par stephen).

  4. A cause de # 3, débarrassez-vous de tout, pas de la déclaration d'alerte dans votre gestionnaire.

Le code devrait maintenant ressembler à ceci:

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
Jarret Hardie

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

Le préfixe javascript: Est utilisé uniquement dans href="" Ou des attributs similaires (non liés à des événements)

0
Konstantin Tarkus