[AJAX] Liste liées et boutons radio

**neg12** · 14/10/2011, 15h34

Bonjour,

étant débutant en Ajax (et dans tous les langages web), je suis confronté à un problème concernant 2 listes liées et des boutons radio.

J'ai en fait 2 listes, la seconde est remplie suivant la sélection dans la première, j'ai utilisé un exemple trouvé sur le web qui marche plutôt bien.

Le problème et que j'ai également 4 boutons radio (2x2), et je voudrais que la seconde liste soit remplie via la première liste mais aussi via les boutons radio sélectionnés (dans index.php ci-dessous list_type et filter-type).

Peut-être pouvez-vous m'aider?

Voici mon code:

index.php: (la partie qui m'interesse)

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
23
24
25
26
27
28
29
30
31
 
<?php
include('db/mysql_db.php');		
echo '<form name="showdom" method="post" action="" >';
echo '<div id="id_listcat">';
echo '<p>Step 1: Select type: </p></br>';
echo '<input type="radio" name="list_type" value="domain" id="domain" checked="checked" )" /><label for="domain">domain</label>&nbsp';
echo '<input type="radio" name="list_type" value="url" id="url" )" /><label for="url">url</label></br></br>';
 
echo '<p>Step 2: Select list type: </p></br>';
echo '<input type="radio" name="filter_type" value="0" id="whitelist" checked="checked" )" /><label for="whitelist">whitelist</label>&nbsp';
echo '<input type="radio" name="filter_type" value="1" id="blacklist" )" /><label for="blacklist">blacklist</label></br></br>';
 
echo '<p>Step 3: Select a company: </p></br>';
echo '<select size=1 name="selectcompany" id="id_selectcompany" onChange="makeRequest(\'RepPhpAjax_showdom.php\',\'id_selectcompany\',\'id_listdom\')">'; 
echo '<option>Select: </option>';
$result_recherche=mysql_query("SELECT distinct company FROM $table_company ORDER BY company" ) or die ("Error: ".mysql_error());
$nombre_enr=mysql_num_rows($result_recherche);
while ($row=mysql_fetch_assoc($result_recherche)){
?>
<option value="<?php echo $row['company']?>">
<?php echo $row['company']?></option>
<?php		
echo '</select><br><br>'; 
echo '</div>';
echo '<div id="id_listdom">';
 
echo '</div>';
echo '</form>';			
mysql_close($conn);
?>

Script_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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
 
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST 
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}
 
function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}

RepPhpAjax_showdom.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
 
<?php
 
include ("db/mysql_db.php");
$listype=$_POST['list_type'];
$result_recherche=mysql_query("SELECT distinct $listype FROM $table_custom where company_location='".$_POST['val_sel']."' and type='".$_POST['filter_type']."' ORDER BY $listype" ) or die ("Error: ".mysql_error());
 
$aff="";
$aff=$aff."<select name='selectdom[]' id='id_selectdom' size='10'>";
 
while ($row=mysql_fetch_assoc($result_recherche)){
 
$aff.="<option value=\"$row[$listype]\">$row[$listype]</option>";
}
 
$aff=$aff."</select>

<br><br>";
 
echo $aff;
?>

Merci d'avance pour toute aide.

**neg12** · 18/10/2011, 15h57

Bonjour,

après quelques jours j'en suis toujours à peu près au même point, j'ai testé d'adapter plusieurs exemples mais sans succès.

Pour préciser mon problème, en fait je voudrais que la requête sql du fichier RepPhpAjax_showdom.php soit modifiée suivant la valeur des radio boutons list_type et filter_type du fichier index.php.

J'ai quelque peu modifié ma fonction ajax, mais cela ne me permet pas de récupérer la valeur des radio dans RepPhpAjax_showdom.php:

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
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
61
62
63
64
 
// Requette AJAX
function makeRequest(url,id_selectcompany,id_selectdom){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
 
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_selectdom); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_selectcompany);
data="val_sel="+obj.value;
http_request.send(data);
 
 
var radios1 = document.getElementsById(list_type);
for (i=0; i<radios1.length; i++)
        if (radios1[i].checked)
                var valsel1 = radios1[i].value;
var radios2 = document.getElementsById(filter_type);
for (i=0; i<radios2.length; i++)
        if (radios2[i].checked)
                var valsel2 = radios2[i].value;
data="val_sel="+obj.value;
http_request.send(data);
http_request.send(valsel1);
http_request.send(valsel2);
 
}
 
function traitementReponse(http_request,id_selectdom) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_selectdom);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}

RepPhpAjax_showdom.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
23
24
 
<?php
 
include ("db/mysql_db.php");
 
list_type_choice=$_POST['val_sel1'];
$result_recherche=mysql_query("SELECT distinct $list_type_choice FROM Custom_URL where company_location='".$_POST['val_sel']."' and type='".$_POST['val_sel2']."' ORDER BY $list_type_choice" ) or die ("Error: ".mysql_error());
 
$aff="";
 
$aff=$aff."<select name='selectdom[]' id='id_selectdom' size='10'>";
 
while ($row=mysql_fetch_assoc($result_recherche)){
 
$aff.="<option value=\"$row[$list_type_choice]\">$row[$list_type_choice]</option>";
}
 
$aff=$aff."</select>

<br><br>";
 
 
echo $aff;
?>

Si quelqu'un peut me dire comment bien récupérer la valeur des radio dans la fonction ajax et les transmette à RepPhpAjax_showdom.php je l'en remercie d'avance,

cordialement

Edit: j'ai également modifié les id des radio dans l'index.php pour qu'ils correspondent aux document.getElementsById de la fonction ajax.

Code php :

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

1
2
3
4
5
6
7
 
echo '<input type="radio" name="list_type" value="domain" id="list_type" checked="checked" /><label for="domain">domain</label>&nbsp';
echo '<input type="radio" name="list_type" value="url" id="list_type" /><label for="url">url</label></br></br>';
 
echo '<p>Step 2: Select list type: </p></br>';
echo '<input type="radio" name="filter_type" value="0" id="filter_type" checked="checked" /><label for="whitelist">whitelist</label>&nbsp';
echo '<input type="radio" name="filter_type" value="1" id="filter_type" /><label for="blacklist">blacklist</label></br></br>';

**Bovino** · 18/10/2011, 18h05

Tout d'abord, merci de jeter un oeil à Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML généré et non le PHP.

Ensuite, un id doit être unique dans la page !

**neg12** · 19/10/2011, 10h56

Bonjour,

merci pour la réponse,

Voici le code HTML généré:

Index.php

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
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
 
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script LANGUAGE="Javascript" SRC="js/functions.js"></script> 
<script LANGUAGE="Javascript" SRC="js/ajax_refresh_list.js"></script>
<script>  
// When the document loads do everything inside here ...  
$(document).ready(function(){   
        // When a link is clicked  
        $("a.tab").click(function () {    
                // switch all tabs off  
                $(".active").removeClass("active");  
                // switch this tab on  
                $(this).addClass("active");  
                // slide all elements with the class 'content' up  
                $(".content").slideUp();  
                // Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
                var content_show = $(this).attr("title");  
                $("#"+content_show).slideDown();          
        });       
});  
 </script> 
 </head>
<body id="included-pages">
 
 
<div class="container">
	<ul class="tabs">
	<li><a href="#tabs-1">Show Domain/URL</a></li>
	</ul>		
	<div class="tab_container">
		<div id="tabs-1" class="tab_content">
			<form name="showdom" method="post" action="" >
			<div id="id_listcat">
				<p>Step 1: Select type: </p></br>
				<input type="radio" name="list_type" value="domain" checked="checked" /><label for="domain">domain</label>
				<input type="radio" name="list_type" value="url" /><label for="url">url</label></br></br>
				<p>Step 2: Select list type: </p></br>
				<input type="radio" name="filter_type" value="0" checked="checked" /><label for="whitelist">whitelist</label>
				<input type="radio" name="filter_type" value="1" /><label for="blacklist">blacklist</label></br></br>
				<p>Step 3: Select a company: </p></br>
				<select size=1 name="selectcompany" id="id_selectcompany" onChange="makeRequest('RepPhpAjax_showdom.php','id_selectcompany','id_listdom')">
				<option>Select: </option>					
				<option value="test1">test</option>
				<option value="test2">test2</option>
				</select><br><br>
			</div>
			<div id="id_listdom">
				<!-- ici sera charge la reponse mode texte de PHP ? la request AJAX -->
			</div>
			</form>                 
		</div>
	</div>
</div>
<body>
</html>

Je n'ai pas contre pas comprit la remarque sur l'id unique, enfin dans le principe oui, mais pour des radio bouttons ne faut-il pas qu'ils aient le même identifiant?
Mais du coup j'ai viré l'id des radio et utilise getElementsByName à la place de getElementsById:

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
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
 
// Requette AJAX
function makeRequest(url,id_selectcompany,id_selectdom){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
 
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_selectdom); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_selectcompany);
data="val_sel="+obj.value;
http_request.send(data);
var radios1 = document.getElementsByName(list_type);
for (i=0; i<radios1.length; i++)
    if (radios1[i].checked)
    valsel1 = radios1[i].value;
http_request.send(valsel1);
var radios2 = document.getElementsByName(filter_type);
for (i=0; i<radios2.length; i++)
    if (radios2[i].checked)
    valsel2 = radios2[i].value;
http_request.send(valsel2);
}
 
function traitementReponse(http_request,id_selectdom) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_selectdom);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}

Mais je suis toujours dans l'impasse, le valeur des radio n'est pas récupérée.

**Bovino** · 19/10/2011, 11h07

Non, un identifiant doit être unique dans le document. Pour ce qui est des boutons radio, c'est effectivement l'attribut name qui permet de les lier.
D'autre part, l'attribut for de la balise <label> correspond à l'identifiant de l'input auquel il est lié, toute autre valeur est inutile.

Enfin, ta méthode de récupération de la valeur du radio sélectionné est bonne, mais il ne faut pas envoyer la requête à chaque fois !
Il faut ajouter la valeur trouvée aux paramètres envoyés avec la requête, mais celle-ci ne doit être envoyée qu'une seule fois !

**neg12** · 19/10/2011, 11h55

Ok, merci pour ces précisions.

Mais que veux tu dire par "ajouter la valeur trouvée aux paramètres envoyés avec la requête, mais celle-ci ne doit être envoyée qu'une seule fois"?

J'ai un peu de mal à comprendre désolé, peux-tu me montrer un aperçu de code?

Ou alors quelque chose comme sa? (ne marche pas, mais dans le principe?)

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
obj=document.getElementById(id_selectcompany);
data="val_sel="+obj.value;
var radios1 = document.getElementsByName(list_type);
for (i=0; i<radios1.length; i++)
    if (radios1[i].checked)
    valsel1 = radios1[i].value;
var radios2 = document.getElementsByName(filter_type);
for (i=0; i<radios2.length; i++)
    if (radios2[i].checked)
    valsel2 = radios2[i].value;
http_request.send(data,valsel1,valsel2);

Merci, et désolé si mes questions paraissent bêtes mais je débute

**Bovino** · 19/10/2011, 12h07

mais je débute

Certes, mais débuter n'abstient pas de faire un minimum de recherches... le passage de paramètres dans une requête AJAX, c'est un peu le B.A.BA non...

Code :

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

var params = 'nom1=valeur1&nom2=valeur2&nom3=valeur3';

**neg12** · 19/10/2011, 13h01

J'aurai du regarder avant pour le passage de paramètre, mais sa reste pas évident à comprendre.

J'ai donc testé:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var radios1 = document.getElementsByName(list_type);
for (i=0; i<radios1.length; i++)
    if (radios1[i].checked)
    valr1 = radios1[i].value;
var radios2 = document.getElementsByName(filter_type);
for (i=0; i<radios2.length; i++)
    if (radios2[i].checked)
    valr2 = radios2[i].value;
obj=document.getElementById(id_selectcompany);
var data='val_sel=+obj.value&val_sel1=valr1&val_sel2=valr2';
http_request.send(data);

Mais toujours sans succès, je ne vois pas l'erreur?

**neg12** · 20/10/2011, 15h33

J'ai trouvé la solution, si sa peut aider quelqu'un d'autre:

J'ai ajouté deux fonctions pour récupérer leur valeur des radios:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
function get_list_type_Value(){
var lstRadios = document.getElementsByName('list_type');
for(var i=0; i<lstRadios.length; i++) if(lstRadios[i].checked) return lstRadios[i].value;
return null;			
}
function get_filter_type_Value(){
var lstRadios = document.getElementsByName('filter_type');
for(var i=0; i<lstRadios.length; i++) if(lstRadios[i].checked) return lstRadios[i].value;
return null;				
}

Et j’envoie la requête de cette façon:

Code javascript :

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

1
2
3
 
obj=document.getElementById(id_selectcompany);
http_request.send('val_sel='+obj.value+'&val_sel1='+ get_list_type_Value() +'&val_sel2='+get_filter_type_Value());

Merci encore pour ton aide Bovino.

**Bovino** · 20/10/2011, 15h43

J'ai ajouté deux fonctions pour récupérer leur valeur des radios:

Une seule suffirait, avec un paramètre à passer :

Code :

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

1
2
3
4
5
6
7
8
9
function get_radio_Value(nom_radio){
    var lstRadios = document.getElementsByName(nom_radio);
    for(var i=0; i<lstRadios.length; i++){
        if(lstRadios[i].checked){
            return lstRadios[i].value;
        }
    }
    return null;			
}

Et avec l'indentation et les accolades de bloc, ça rend l'ensemble plus lisible quand même...

**neg12** · 20/10/2011, 15h47

Ah oui c'est plus simple et plus propre avec une seule fonction, merci!

[AJAX] Liste liées et boutons radio

AJAX

Vue hybride

Discussions similaires

Partager

Partager