onchange dans des bouton radio

Version imprimable

Bonjour à tous, j'ai besoin de votre aide svp. Enfaîte j'ai dans ma page 4 bouton radio, et je veux que a chaque fois que je choisi un bouton un contenu en dessous doit être changé. J'ai utilisé la fonction onchange mais je crois que j'ai une erreur dans mon code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <form action="" method="POST">	
							<center>
							<input type="radio"  name="choix" id="choix" value="1" onChange="changer()">
							<label for="prim">prim</label>&nbsp;&nbsp;
							<input type="radio"  name="choix" id="choix" value="2" onChange="changer()">
							<label for="cem">cem</label>&nbsp;&nbsp;
							<input type="radio"  name="choix" id="choix" value="3" onChange="changer()">
							<label for="lycee">lycee</label>&nbsp;&nbsp;
							<input type="radio"  name="choix" id="choix" value="4" onChange="changer()">
							<label for="admin">admin</label></center><br/>	
	                    </form>
 
	 <div id='resultat' style='display:inline'>
	 </div>

la fonction 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
 function changer(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('resultat').value = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_post.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id du corp
				sel = document.getElementById('choix');
				idchoix = sel.options[sel.selectedIndex].value;
				xhr.send("choix="+idchoix);
			}

ajax_post.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <?php	if(isset($_POST["choix"])){
 
	 if($_POST["choix"]==1){
	    echo '<div class="mimi" style="direction: rtl;">
	  <table>
	   <tr>
		<th rowspan="2">poste</th>
		<th rowspan="2">secteur</th>
		<th colspan="2">etablissement</th>
	   </tr>
	   <tr>
	    <th>français</th>
		<th>arabe</th>
	   </tr>
	   
	  </table>
	  </div>'; 
	 } else {
	     echo 'blablabla';
	 }
 
	}?>

Veuillez m'aidez svp:(:(:(:(:(

Bonjour,

A- HTML

A1- un attribut id DOIT ETRE UNIQUE.
Tu ne peux pas avoir plusieurs fois id="choix".

A2- Par contre, quand on écrit <label for="xxx">, ça doit se référer à <... id="xxx" ...>.

A3- Sur un "bouton radio", on clique. Donc ce n'est pas onChange, mais onclick.

A4- Enfin, on peut passer la "value" en paramètre à la fonction JS.

Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form action="" method="POST"> <center> <input id="prim" type="radio" name="choix" value="1" onclick="changer(this.value)"> <label for="prim">prim</label>   <input id="cem" type="radio" name="choix" value="2" onclick="changer(this.value)"> <label for="cem">cem</label>   <label for="lycee"><input id="lycee" type="radio" name="choix" value="3" onclick="changer(this.value)"> lycee</label>   <input id="admin" type="radio" name="choix" value="4" onclick="changer(this.value)"> <label for="admin">admin</label> </center> </form> <div id="resultat" style="display:inline"></div>
B- le SCRIPT JS

B1- on ne peut pas avoir :
Code:

1 2 sel = document.getElementById('choix'); idchoix = sel.options[sel.selectedIndex].value;
Ca, c'est le code pour récupérer une sélection d'un <select> !

B2- Il faut supprimer ces 2 lignes (ci-dessus), et ajouter le paramètre à la fonction :
Code:

1 2 3 function changer( idchoix ) { ...
C- AFFICHAGE

C1- Ici, tu veux afficher du texte dans un <div>. Pas dans un <input>.

Ce n'est donc pas .value :

Code:

document.getElementById('resultat').value = leselect;

Mais .textContent (texte non formaté) ou .innerHTML (texte non formaté):

Code:

document.getElementById('resultat').innerHTML = leselect;

Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function changer( idchoix ) { var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('resultat').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajax_post.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments xhr.send("choix="+idchoix); }

09/04/2019, 11h39
maristar
merci pour votre aide et votre réponse assez rapide et précise :):).

pour le dernier point, puisque j'ai supprimé les deux ligne, je vais envoyer quoi?? le 'idchoix'
Code:

1 2 xhr.send("choix="+idchoix);
09/04/2019, 11h46
Invité
RELIS mon message précédent.
Code:

1 2 3 function changer( idchoix ) { ...
idchoix est passé en paramètre de la fonction JS, et vaut la "value" du "bouton radio" coché (via this.value).

:salut:

Un ID doit être unique dans la page web.

Fichier CSS :

Code:

1
2
3
4
5
6
7
8
.enLigne {
  display: inline;
  margin-left: 1rem;
}
 
.enLigne>input[type='radio'] {
  margin-left: 1rem;
}

Fichier HTML :

Code:

1
2
3
4
5
6
7
8
9
10
<div class="enLigne">
    <input type="radio" name="choix" value="1">
    <label>prim</label>
    <input type="radio" name="choix" value="2">
    <label>cem</label>
    <input type="radio" name="choix" value="3">
    <label>lycee</label>
    <input type="radio" name="choix" value="4">
    <label>admin</label>
</div>

Fichier JS :

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elemsRadio = Array.from(document.querySelectorAll('input[name="choix"]'));
 
    for (const elemRadio of elemsRadio) {
        elemRadio.addEventListener('change', ev => {
 
            // debug, console, touche F12
            console.log(`radio : ${ ev.target.value }`); // 1 à 4
 
            let elemRadio = ev.target;
            let valeur = ev.target.value;
 
            // vos codes ici
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

11/04/2019, 09h57
maristar

Grand merci à vous jreaux62, ça marche très très bien. vous m'avez sauvé la vie encore une fois ;);););););););)