11521 sujets

JavaScript, DOM et API Web HTML5

Formulaires aux boutons radios ayant les mêmes class

Bonjour,

sur un site dynamique, des votes peuvent être créés avec plusieurs réponses. Cela donne des formulaires de ce type : 

<form action="page.html" id="vote-2" method="post" aria-live="off" class="noajax hasajax">

<input type="radio" name="quickvote" class="radio" id="champ_quickvote_1" value="reponse1">
<label for="champ_quickvote_1"><p>Vanille</p></label>

<input type="radio" name="quickvote" class="radio" id="champ_quickvote_2" value="reponse2">
<label for="champ_quickvote_2"><p>choco</p></label>

	<input type="radio" name="quickvote" class="radio" id="champ_quickvote_3" value="reponse3">
	<label for="champ_quickvote_3"><p>pêche</p></label>

                <input type="submit" class="submit btn btn-default" value="OK">
   
</form>


Mon problème c'est que tous les formulaires sur la même page (chacun ayant son propre ID), ont les mêmes input avec la même class (id="champ_quickvote_1" value="reponse1", id="champ_quickvote_2" value="reponse2"....) Ce qui créé un bug lors de la sélection, seuls les inputs du 1er formulaire sont sélectionnés.

J'aimerais casser ça en JS. Maintenant j'avoue que je ne sais pas qu'est-ce qui serait idéal...

Merci pour vos retours.
Modifié par letty (30 Jan 2017 - 11:14)
Bonjour,

les input de type radio sont fait pour n'avoir qu'une seule réponse à la question donc si tu veux avoir plusieurs réponses il faut utiliser les checkbox.


<form action="page.html" id="vote-2" method="post" aria-live="off" class="noajax hasajax">

<input type="checkbox" name="quickvote" class="radio" id="champ_quickvote_1" value="reponse1">
<label for="champ_quickvote_1"><p>Vanille</p></label>

<input type="checkbox" name="quickvote" class="radio" id="champ_quickvote_2" value="reponse2">
<label for="champ_quickvote_2"><p>choco</p></label>

	<input type="checkbox" name="quickvote" class="radio" id="champ_quickvote_3" value="reponse3">
	<label for="champ_quickvote_3"><p>pêche</p></label>

                <input type="submit" class="submit btn btn-default" value="OK">
   
</form>
Oui je sais bien ça merci Smiley smile Dans un système de type vote, il faut utiliser des boutons radio c'est mieux.

Sauf que j'ai plusieurs formulaires dans la même page 

<form id="form1">
<input type="radio" name="vote" id="vote1" value="vote1">
<input type="radio" name="vote" id="vote2" value="vote2">
</form>

<form id="form2">
<input type="radio" name="vote" id="vote1" value="vote1">
<input type="radio" name="vote" id="vote2" value="vote2">
</form>

<form id="form3">
<input type="radio" name="vote" id="vote1" value="vote1">
<input type="radio" name="vote" id="vote2" value="vote2">
</form>


Si je sélectionne le vote n°2 formulaire #form3, eh bien je ne peux pas le sélectionner. La sélection se fait sur le #form1. Et c'est pas très pratique !
Modifié par letty (30 Jan 2017 - 15:33)
Bin c'est normal vu que tu utilises plusieurs fois le même ID. L'ID est unique par rapport au document entier.

En fait je pense que c'est une assez mauvaise solution d'essayer de corriger ça avec du JS si c'est généré en côté serveur.
Il faudrait corriger ça à la source. Tu peux utiliser une variable que tu incrémente pour savoir quel numéro d'ID tu dois utiliser.
Sujet clos
Aller à