Traitement après check radio

Version imprimable

Bonjour étant étudiant en communication je me dois de faire un formulaire qui traite une inscription à une manifestation. Je débute donc dans la programmation.

J'ai des boutons radios qui permettent de choisir combien de personnes inscrire qui se presentent sous la forme:
Code:

1 2 3 4 5 <p>Nombre de personne(s):</p> <input type="radio" name="radio" value="1" > 1</br> <input type="radio" name="radio" value="2" > 2</br> <input type="radio" name="radio" value="3" > 3</br> <input type="radio" name="radio" value="4" > 4</br>
J'aimerais qu'un javascript effectue un traitement en fonction du radio sélectionné. En effet j'ai besoin du poids des personnes, j'aimerais donc qu'en fonction du nombre de personnes sélectionné, des champs apparaissent pour insérer le poids des personnes.
Ex:
- si l'utilisateur coche 2 personnes, 2 champs apparaissent pour inscrire le poids des 2 personnes.
- si l'utilisateur coche 3 personnes, 3 champs apparaissent pour inscrire le poids des 2 personnes.
- etc...

Je n'ai aucune idée de comment faire sachant que je n'ai jamais fait de Javascript. Quelqu'un pourrait-il m'aiguiller?

merci d'avance

20/02/2012, 15h20
Rachel

Bonjour :)
Déjà un bon point : tu as donné un même nom à tous tes boutons radio. Maintenant en javascript, tu dois faire une fonction qui utilise la valeur des boutons.

Code:

function form(value){/* code javascript */}

et dans ton code html appeler la fonction comme ceci : (c'est un exemple, tu modifieras si ça ne te convient pas)

Code:

<input type="button" value="valider" onclick="form(nom_formulaire.nom_radio.value)">

où nom_formulaire et nom_radio sont les noms du formulaire et du bouton radio :)
20/02/2012, 15h48
sbenett

Merci de ta réponse rapide,

De cette façon je suis obligé de cliquer sur mon bouton valider aussi? j'aimerais que sa soit le fait de cocher le radio qui change quelque chose, et non le fait de valider le formulaire. Mais je ne sais même pas si c'est possible.
20/02/2012, 17h00
tim2000

Du coup il suffit de mettre l'évenement OnClick sur tes boutons radios.

Code:

<input type="radio" name="radio" value="1" onclick="form(nom_formulaire.nom_radio.value)"> 1</br>

etc ...
21/02/2012, 10h14
sbenett

Ha je vois, merci.
Du coup comment dois-je m'y prendre dans mon script pour ouvrir un champ texte correspondant lors de la selection du radio? Et ce de façon interactive. Ca m'a l'air bien compliqué mon affaire.

Normalement (en tout cas je crois), le mieux est de crée ton ou tes champs de texte, mais en caché, avec display='none'.

Ensuite dans la fonction qui est appeler dans tes radios, il suffit d'indiquer au champs texte de reaparaitre.

Je t'ai fait un exemple, il y a peut être une meilleur solution, je ne suis pas hyper bon

html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
      <p>Nombre de personne(s):</p>
      <p>
        <input type="radio" name="radio" value="1" OnClick="display();"> 1</br>
        <input type="radio" name="radio" value="2" OnClick="display();"> 2</br>
        <input type="radio" name="radio" value="3" OnClick="display();"> 3</br>
        <input type="radio" name="radio" value="4" OnClick="display();"> 4</br>
        </p>
        <p>
        <input type="text" id="Texte1" name="text1" style="display:none;" value="1" >
        <input type="text" id="Texte2" name="text2" style="display:none;" value="2" >
        <input type="text" id="Texte3" name="text3" style="display:none;" value="3" >
        <input type="text" id="Texte4" name="text4" style="display:none;" value="4" >
        </p>

jscript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
          function display()
            {
            if(document.ReplayForm.radio[0].checked)
                {
                document.getElementById("Text1").style.display = 'block';
                document.getElementById("Text2").style.display = 'none';
                document.getElementById("Text3").style.display = 'none';
                document.getElementById("Text4").style.display = 'none';
                }
            if(document.ReplayForm.radio[1].checked)
                {
                document.getElementById("Text1").style.display = 'block';
                document.getElementById("Text2").style.display = 'block';
                document.getElementById("Text3").style.display = 'none';
                document.getElementById("Text4").style.display = 'none';
                }
            if(document.ReplayForm.radio[2].checked)
                {
                document.getElementById("Text1").style.display = 'block';
                document.getElementById("Text2").style.display = 'block';
                document.getElementById("Text3").style.display = 'block';
                document.getElementById("Text4").style.display = 'none';
                }
            if(document.ReplayForm.radio[3].checked)
                {
                document.getElementById("Text1").style.display = 'block';
                document.getElementById("Text2").style.display = 'block';
                document.getElementById("Text3").style.display = 'block';
                document.getElementById("Text4").style.display = 'block';
                }
            }

21/02/2012, 17h28
Rachel

ça ne serait pas mieux un seul champ texte, auquel on attribue sa valeur ? :)