appelant javascript d'un formulaire HTML

Je fonde ma question et par exemple sur la réponse de Jason this questionappelant javascript d'un formulaire HTML

J'essaie d'éviter d'utiliser un eventListner, et juste pour appeler handleClick onsubmit, lorsque le bouton est utilisé.

Absolument rien ne se passe 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>

modifier:

S'il vous plaît ne suggèrent pas un cadre comme une solution.

Voici les modifications pertinentes 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>

Source

2009-03-25 Joshxtothe4

aucune des méthodes ne fonctionnerait dans les navigateurs modernes si vous ne possédez pas l'attribut 'sandbox =" allow-scripts "' pour l'élément de formulaire. http://www.w3schools.com/Tags/att_iframe_sandbox.asp –

Dans ce morceau de code:

getRadioButtonValue(this["whichThing"]))

vous n'obtenez pas de référence à quoi que ce soit. Par conséquent, votre radiobutton dans la fonction getradiobuttonvalue est indéfini et génère une erreur.

EDIT Pour obtenir la valeur sur les boutons radio, prenez la bibliothèque JQuery, puis utilisez ceci:

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

Edit 2 En raison du désir de réinventer la roue, voici 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, au fond, modifier la ligne d'origine de code pour lire ainsi:

getRadioButtonValue(document.myform.whichThing))

Edit 3 Voilà 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 que le suivant, 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 le 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é le mode d'accès au formulaire. La structure est la suivante: document. [LE NOM DU FORMULAIRE]. [LE NOM DE CONTRÔLE] pour obtenir des informations. Depuis que vous avez renommé votre aye, vous avez dû modifier le document.myform. à document.aye. En outre, le document .aye ["whichThing"] est juste faux dans ce contexte, car il devait être document.aye.whichThing.

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

EDIT 4 Juste pour être clair. document.aye ["whichThing"] vous donnera 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.

Voir la différence de 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 
}

Source

2009-03-25 21:25:16

Sinon, comment pourrais-je obtenir la valeur d'un radioButton? –

Utilisez getRadioButtonValue (document.myform ['whichThing']). Je passe un peu ici sur javascript OO, mais "this" est utilisé pour faire référence à un objet lorsqu'une fonction fait partie de la portée de l'objet. Votre exemple utilise des fonctions de niveau supérieur et aucun objet. –

Ahh, cela échoue aussi. Pouvez-vous donner plus d'un exemple? –

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

préfixe javascript: est utilisé uniquement dans href="" ou attributs similaires (pas d'événements liés)

Source

2009-03-25 21:25:10

Vous pouvez utiliser javascript forme url avec

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

Ou utilisez gestionnaire d'événements onSubmit

<form onSubmit="return handleClick()">

Dans la forme plus tard, Si vous renvoyez false depuis le handleClick, cela empêchera la procédure de soumission normale. Renvoie la valeur true si vous souhaitez que le navigateur suive la procédure de soumission normale.

Votre gestionnaire d'événements onSubmit le bouton échoue aussi à cause de la Javascript: partie

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>

Source

2009-03-25 21:33:48 Miquel

J'ai essayé les deux –

S'il vous plaît voir mon edit, la solution fonctionne – Miquel

Joshxtothe4 a raison ... son alerte échoue, pas principalement parce que sa fonction n'est pas appelée, ni parce qu'il est appelé deux fois en raison de doubler l'appel de l'événement javascript, mais parce que la construction this ["whichThing"] provoque une erreur –

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

Vous avez saisi cette suggestion g document.myform['whichThing'] un peu trop littéralement. Votre formulaire est nommé "aye", donc le code pour accéder aux boutons radio whichThing devrait utiliser ce nom: `document.aye ['whichThing'].
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"/>
et compostage d'un objet de l'événement dans un navigateur est un processus très impliqué. Cela varie beaucoup selon le type et la version du navigateur. IE et Firefox gèrent ces choses très différemment, donc un simple event.preventDefault() ne fonctionnera pas ... en fait, la variable d'événement ne sera probablement même pas définie car il s'agit d'un gestionnaire onclick d'une balise. C'est pourquoi Stephen ci-dessus essaie si fort de suggérer un cadre. Je me rends compte que vous voulez connaître les mécanismes, et je recommande Google pour cela. Dans ce cas, en guise de solution de contournement simple, utilisez return false dans la balise onclick comme dans le numéro 2 ci-dessus (ou renvoyez false à partir de la fonction comme suggéré). En raison de # 3, se débarrasser de tout ce qui n'est pas l'instruction d'alerte dans votre gestionnaire.

Le code devrait 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>

Source

2009-03-26 17:51:19

Merci pour toute votre aide.J'ai choisi la réponse de Stephens comme je l'ai senti il beaucoup plus de travail, mais votre réponse a également été très utile –

exemple Pretty Miquel (# 32) devrait être ajoutée:

<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 la forme devrait avoir:

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

Source

2016-11-17 12:41:48

Et le formulaire devrait avoir: –

appelant javascript d'un formulaire HTML

Répondre

Questions connexes