Discussion :

[maristar]

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

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

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 :

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

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
 <?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

[Invité]

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

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

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>&nbsp;&nbsp;
		<input id="cem" type="radio" name="choix" value="2" onclick="changer(this.value)">
		<label for="cem">cem</label>&nbsp;&nbsp;
		<label for="lycee"><input id="lycee" type="radio" name="choix" value="3" onclick="changer(this.value)">
		lycee</label>&nbsp;&nbsp;
		<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 :

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

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

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

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 :

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

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

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

Code :

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

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

Ce qui donne :

Code JavaScript :

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

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

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

1
2
 
xhr.send("choix="+idchoix);

[Invité]

RELIS mon message précédent.

Code :

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

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

[danielhagnoul]

Un ID doit être unique dans la page web.

Fichier CSS :

Code CSS :

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

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

Fichier HTML :

Code HTML :

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

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

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

[maristar]

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