Comment créer une interaction entre des boutons radios et une liste déroulante?

Courgette17 · 19/10/2006, 14h41

Bonjour,

J'utilise beaucoup votre site pour mes études et j'ai cherché dans vos nombreux guides et FAQs, une réponse à mon problème actuel mais en vain.
Si j'ai loupé la réponse et qu'elle est déja indiquée autre part, merci de me donner le lien.

Voila mon problème, j'essaie de faire un formulaire de création de produit et j'aimerais que ma liste déroulante change en fonction du bouton radio sur lequel l'utilisateur a cliqué.
Exemple:
Type 1: Raster Liste 1: shp, mif
Type 2: Vecteur Liste 2: tiff....

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
32
33
 
Format du Produit:<br />
<script type="text/javascript">
function reload()
{
document.form1.Format.reload()
}
</script>
Raster
<input type="radio" name="Type" value="Raster" checked="checked" onclick="reload()"><br />
Vecteur: 
<input type="radio" name="Type" value="Vecteur" onclick="reload()">
<br />
<br />
<br />
<script type="text/javascript">
if (document.form1.Type[0].checked)
{
document.write("<select name='Format'>")
document.write("<option value='shp'>*.shp (Shapefile)</option>")
document.write("<option value='mif'>*.mif (Mapinfo)</option>")
document.write("</select>")
}
else
{
document.write("<select name='Format'>")
document.write("<option value='jpg'>*.jpg </option>")
document.write("<option value='tiff'>*.tiff </option>")
document.write("<option value='img'>*.img </option>")
document.write("<option value='sid'>*.sid </option>")
document.write("</select>")
}
</script>

J'ai d'abord essayé de le faire en php mais je n'ai pas trouvé de manière simple de le faire, vu que je n'arrivais pas à désigner les formulaires.
J'ai donc essayé en javascript mais je ne me débrouille pas très bien dans ce langage, c'est pour cela que je vous demande votre aide.
Si je ne mets pas de checked="checked", aucune liste déroulante apparait.
Si je l'active au contraire, seule la liste correspond au bouton radio ou j'ai mis checked="checked" apparait. Et cette liste ne change pas en fonction du fait que je clique sur les boutons Raster ou Vecteur.

Si vous avez un moyen encore plus simple de le faire, merci de me l'indiquer.

Merci d'avance

P.S.: Je n'ai bien sur pas mis les balises form en entier dans le code, si vous avez plus de précisions à me demander, n'hésitez pas.

**tchoukapi** · 19/10/2006, 22h44

Slt Perso je te conseil un petit coup d'Ajax

2 pages, une base et voila !

bon ok je te poste ca

ta connexion a ta base mysql (la c'est une config locale)
========================

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
<?
$dbname = 'radioliste'; // le nom de ta base
$hostname = 'localhost'; 
$username = 'root'; // nom d'utilisateur de la base
$password = ''; // mot de passe de la base
 
$connection = mysql_connect("$hostname", "$username", "$password") or die(mysql_error());
 
mysql_select_db("$dbname", $connection) or die(mysql_error());
 
if (!$connection)
{
echo "<html>\n";
echo "<head>\n";
echo "<title> Echec de la connexion</title>\n";
echo "</head>\n";
echo "<body>\n";
echo "la connexion n'a pu s'effectuer, veuillez contacter le 
<a href=\"mailto:webmaster@tonsite.com\">webmaster</A>.\n";
echo "</body>\n";
echo "</html>\n";
exit;
}
?>

la page de ton formulaire (form.php)
============================

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
 
<html>
<head>
<title>Formulaire</title>
<script language="JavaScript" src="ajax.js"></script>
</head>
 
<body>
 
<?
include "cnx.php";
// Requetes qui va chercher tes radios bouton
$req = mysql_query("SELECT idRadio,nomRadio FROM radio ORDER BY idRadio asc")
OR die(mysql_error());
 
	while($row = mysql_fetch_assoc($req)){
	echo "<input onClick=choix('$row[idRadio]') name=radio type=radio id=radio value=$row[idRadio]>$row[nomRadio]&nbsp;($row[idRadio])<br/>";
	}
 
echo "<br />";
 
// L'affichage dynamique de ta liste
echo "<div style=display:inline id=liste><select name=liste><option>Raster ou Vector</option</select></div>"
 
 ?>
 
</body>
</html>

la page de ta requete (requete.php)
==================

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?
include "cnx.php";
 
$req1 = mysql_query("SELECT idListe,nomListe FROM liste WHERE idListeRadio='$_POST[id]'")
OR die(mysql_error());
echo "<select name=liste>";
	while($row = mysql_fetch_assoc($req1)){
	echo "<option>".$row["nomListe"]."</option>";
	}
echo "</select>";
?>

Le script js/ajax (ajax.js)
=====================

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
32
33
34
35
36
var xhr = null; 
 
		function getXhr(){
			if(window.XMLHttpRequest) // Firefox et autres
			   xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject){ // Internet Explorer 
			   try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
			}
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   xhr = false; 
			} 
		}
	function choix(idRadio){
			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('liste').innerHTML = leselect;
				}
			}
 
			// Ici on va voir comment faire du post
			xhr.open("POST","requetes.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("id="+idRadio);
		}

Gros avantage c'est que c'est modelable a l'infini , tu peux rajouter autant de radio que tu veux et d'element dans ta liste.
Je ne te cache pas qu'il y a une tres bonne FAQ sur le sujet :

http://siddh.developpez.com/articles/ajax/

Bon allez je suis en form je te poste ma base pour l'exemple avec :

Table "radio"
==============

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
-- 
-- Structure de la table `radio`
-- 
 
CREATE TABLE `radio` (
  `idRadio` int(7) NOT NULL auto_increment,
  `nomRadio` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`idRadio`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
-- 
-- Contenu de la table `radio`
-- 
 
INSERT INTO `radio` VALUES (1, 'Raster');
INSERT INTO `radio` VALUES (2, 'Vector');

Table "liste"
===========

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
CREATE TABLE `liste` (
  `idListe` int(7) NOT NULL auto_increment,
  `nomListe` varchar(50) NOT NULL default '',
  `idListeRadio` int(7) default NULL,
  PRIMARY KEY  (`idListe`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 
-- 
-- Contenu de la table `liste`
-- 
 
INSERT INTO `liste` VALUES (1, 'shp', 1);
INSERT INTO `liste` VALUES (2, 'mif', 1);
INSERT INTO `liste` VALUES (3, 'jpg', 2);
INSERT INTO `liste` VALUES (4, 'tiff', 2);
INSERT INTO `liste` VALUES (5, 'img', 2);
INSERT INTO `liste` VALUES (6, 'sid', 2);

Et forcement ca marche dans IE et FF (a condition que ne nomme pas les variables en entree comme les variables en sortie)

Ca pas l'air simple comme ca mais c'est tellement plus mieux

Amuse toi bien

Je reste dispo si tu bug ! (mais tu n'as pas d'excuse car les fichiers sont tous faits et tu n'as qu'a copier coller, juste les login de base a adapter)

Courgette17 · 22/10/2006, 00h40

Wow, merci beaucoup tchoukapi !! Je testerai ça lundi et te dirais ce que je serais arrivé à faire.

Courgette17 · 23/10/2006, 11h43

Bon j'ai tout essayé et ça marche (forcément c'est du C/C

).
Il y a juste une petite erreur dans le ajax.js, c'est requete.php et non requetes.php , je dis ça pour ceux qui voudraient utiliser les informations que tu as apporté.

Je voulais savoir aussi si il y a moyen de mettre requete.php et form.php en un seul fichier? ou bien transformer les lignes de requete.php en fonction php.

Merci encore

**tchoukapi** · 23/10/2006, 14h07

essaye en mettant une condition dans ta page "form" pour qu'il n'execute pas tout le code de form.php mais seulement celui que tu desire mais je pense que tu va avoir des soucis de rechargement et conflit de variable .

Enfin perso j'ai jamais essayer car de mon cote dans ma page requetes j'ai d'autre requete appeler par des scripts ajax.

Courgette17 · 14/12/2006, 10h47

Dites je suis passé de PHP 4 à 5 et de MySQL 3 à 5 et j'ai pas mal de requetes SQL qui ne fonctionnent plus dont celle-ci présenté plus haut par tchoukapi:

Code :

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

1
2
3
4
5
6
7
8
9
 
$req1 = mysql_query("SELECT idListe,nomListe FROM liste WHERE idListeRadio='$_POST[id]'")
OR die(mysql_error());
echo "<select name=liste>";
	while($row = mysql_fetch_assoc($req1)){
	echo "<option>".$row["nomListe"]."</option>";
	}
echo "</select>";
?>

Il ne me fait meme pas d'erreur, il me met juste le code.
Donc j'aimerais savoir quelles incompatibilités il pourrait y avoir et savoir comment les arranger.

Merci d'avance

**tchoukapi** · 14/12/2006, 11h36

arf
c'est etrange car j'ai tester ca sur une environnement avec PHP5 et mySQL5 et pas de soucis

Je te dis si je trouve des infos sur ton erreur

Comment créer une interaction entre des boutons radios et une liste déroulante?

JavaScript

Discussions similaires

Partager

Partager