Récupérer la valeur d'un bouton radio et l'afficher à l'aide de innerHTML

Bonjour à tous,

je débute en javascript et je patauge pas mal.

Je suis en train d'essayer de réaliser un exercice dont je n'aurai pas le corrigé (c'est un exo d'une ancienne annale que j'essaie de réaliser pour me préparer à mon examen qui aura lieu mi février). Il s'agit d'un formulaire classique avec du texte court, long, des checkboxes, un select simple, un select multiple et des boutons radio.

Il faut afficher le récapitulatif des données à l'aide de innerHTML.
J'ai réussi à le faire pour une partie, mais je rencontre deux problèmes:

1) je n'obtiens qu'une valeur de mon select multiple
2) je ne sais pas comment retourner la valeur de la radiobox cochée autrement que par la commande alert

Voici ce qu'on nous propose (j'ai mis en gras la partie que j'ai complétée):

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>tp1109</title>
    <script type="text/javascript" src="monscript.js"></script>
  </head>
  <body>
    <form>
    <p>
    text <input type="text" id="texte" name="ch1"/> 
    </p>
    
    <p>
    texte long <textarea id="texteLong" name="ch2" rows="3" cols="80"> du texte </textarea>
    </p>
    <p>
     checkbox  <input type="checkbox" id="check1" name="check1"/>  
               <input type="checkbox" id="check2" name="check1"/> 
    </p>

    <p>
      select simple <select  id="selectSimple" name="selectSimple"> 
	<option value="uno">one</option>
	<option value="dos">two</option>
	<option value="tres" selected="selected"  >three</option>	
	<option value="quatro">four</option>
      </select>

    </p>
    <p>
      select multiple <select multiple="multiple" id="selectMultiple" name="selectMultiple"> 
	<option value="uno">one</option>
	<option value="dos" selected="selected">two</option>
	<option value="tres" selected="selected">three</option>	
	<option value="quatro">four</option>

      </select>
    </p>
    
    <p>
      radio <input type="radio" name="rad" value="premier"/>Un 
      radio <input type="radio" name="rad" value="deuxieme"/>Deux 
      radio <input type="radio" name="rad" value="troisieme"/>Trois 
      radio <input type="radio" name="rad" value="quatrieme"/>Quatre
      radio <input type="radio" name="rad" value="cinquieme"/>Cinq
    </p>
  
    <p>
      <button type="button" value="recapitulatif" onclick="affichage(); testerRadio(this.form.rad)">récapitulatif</button>
    </p>
    
    </form>
    
    <div id="recapitulatif"></div>
  </body>

</html>

Et voici mon code javascript:

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
 
 
    function affichage() {
	var texte = document.getElementById('texte').value;
 
	var texteLong = document.getElementById('texteLong').value;
 
	var case1 = document.getElementById('check1').checked;
	var case2 = document.getElementById('check2').checked;
 
	var selectionSimple = document.getElementById('selectSimple').value;
 
        var selectionMultiple = document.getElementById('selectMultiple').value;
 
	var recap= document.getElementById('recapitulatif');
 
	recap.innerHTML= "Texte: " + texte + "<br>" + "Texte long: " + texteLong + "<br>" + "case 1: " + case1 + "<br>" + "case 2: " + case2
	+ "<br>" + "Sélection simple: " + selectionSimple + "<br>" + "Sélection multiple: " + selectionMultiple;
      }
 
      function testerRadio(radio) {
            for (var i=0; i<radio.length;i++) {
             if (radio[i].checked) {
             alert("radio cochée = " + radio[i].value)
         }
      }
   }

Comment puis-je intégrer dans ma commande recap.innerHTML la valeur de la radiobox cochée?

J'ai vu des scripts pour récupérer plusieurs valeurs d'un sélect multiple, tel que celui-ci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var selectedList = new Array();
var selectBox = document.forms[0].monSelect;
for (var i=0; i<selectBox.options.length; i++) {
  if (selectBox.options[i].selected) {
    selectedList.push(selectBox.options[i]);
  }
}
var alertTxt = "";
for (opt in selectedList) {
alertTxt += "L'option "+opt.value+" est selectionnée \n";
}
alert(alertTxt);

mais je ne vois pas comment l'intégrer dans ce que j'ai écrit. Et, de plus, je ne comprends pas monSelect dans var selectBox = document.forms[0].monSelect;

En vous remerciant par avance pour l'aide précieuse que vous pourrez m'apporter.

John