validation des boutons radio

Je suis en train de traiter un formulaire avec php et je souhaite également ajouter une validation côté client. J'ai lu le tutoriel de about.com sur la validation des boutons radio avec javascript et mis en place cet échantillon en fonction de ses directives.validation des boutons radio

a) Pourquoi ne montre-t-il pas le message d'alerte?

b) Comment puis-je remplacer le message d'alerte par du texte innerHtml?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>validateradio</title> 


<script type="text/javascript"> 


function valButton(btn) { 
    var cnt = -1; 
    for (var i=btn.length-1; i > -1; i--) { 
     if (btn[i].checked) {cnt = i; i = -1;} 
    } 
    if (cnt > -1) return btn[cnt].value; 
    else   return null; 

} 




function valButton2(form){ 

var btn=valButton(form.group1); 
if (btn==null){alert('no radio button selected');} 
else alert('button value' + btn + 'selected'); 


} 


</script> 


</head> 


<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" alink="#000088" link="#0000ff" vlink="#ff0000"><br> 

<form name="myform"> 


<label for="r1"><input type="radio" 
name="group1" id="r1" value="1" /> button one</label> 

<label for="r2"><input type="radio" 
name="group1" id="r2" value="2" /> button two</label> 

<label for="r3"><input type="radio" 
name="group1" id="r3" value="3" /> button three</label> 


<input type="submit" name="submitit" onclick="valbutton2(myform);" value="Validate" /> 



</form> 



</body></html>

Source

2010-08-27 andandandand

Cela ressemble à un problème. Votre gestionnaire onclick pour le bouton de soumission est valbutton2(myform); mais le nom de la fonction que vous essayez d'appeler est en réalité valButton2.

En ce qui concerne l'obtention de l'innerHTML, sans utiliser un cadre, il peut être un peu moche. Une solution serait d'ajouter une carte d'identité aux étiquettes qui contient l'identifiant du bouton radio correspondant:

<label for="r1" id="lbl-r1"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

Retournez ensuite une référence au bouton radio sélectionné à partir de votre deuxième fonction au lieu de sa valeur return btn[cnt]; au lieu de return btn[cnt].value;. Ensuite, vous pouvez accéder au texte de l'étiquette en utilisant quelque chose comme ce qui suit:

var id = btn.getAttribute("id"); 
var lbl = document.getElementById("lbl-" + id); 
for (var i = 0; i < lbl.childNodes.length; i++) { 
    var n = lbl.childNodes[i]; 
    if (n.nodeType == 3) { 
     alert(n.nodeValue); 
    } 
}

J'utilise jQuery et d'autres cadres pour si longtemps maintenant, je suis plus un peu rouillé à le faire en javascript droit, cette pourrait probablement être amélioré beaucoup, mais vous avez l'idée.

Source

2010-08-28 00:13:55 Bryan

Merci, ceci résout mon premier numéro. – andandandand

btw, avez-vous utilisé un éditeur pour attraper ça? Je travaille sur gedit d'ubuntu, et je voudrais un peu d'aide pour repérer les problèmes de syntaxe. – andandandand

Voir ma mise à jour pour un moyen possible d'obtenir le texte. Je n'utilisais pas d'éditeur, je l'ai juste pris en train de regarder. – Bryan

validation des boutons radio

Répondre

Questions connexes