Discussion :

[sbenett]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<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

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

[tim2000]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

etc ...

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

[tim2000]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
                }
            }

[Rachel]

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