[AJAX] Fonction Ajax sur des champs boutons radio

**madina** · 22/07/2011, 00h59

Bonjour,

J'ai 3boutons radios dans mon formulaire.
je dois charger un champ liste(par requête) si l'un des boutons radio est clické.

Pour cela, j'ai défini cette fonction javascript ajax qui est appelée sur les événements onclick() de chaque bouton.

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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
function modif_select(val_compte){
	var natcompte1= '';
	var montext='';
	var js_table;
	var js_tableau;
 
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
				alert_ajax(xhr);
				}
 
 
 
				// Ici on va voir comment faire du post
				xhr.open("POST","listes_comptes.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("val_compte="+val_compte);
 
 
 
 
 
	  if (val_compte=='prod')
				{
 
				document.getElementById('ligne_branche').style.display = "";
 
 
				}
				else
				{
 
document.getElementById('ligne_branche').style.display = 'none';
				}
 
				if (val_compte=='Inv')
{
 
document.getElementById('ligne_libelle').style.display = "";
 
}
else
{
 
document.getElementById('ligne_libelle').style.display = 'none';
}
 
 
 
 
 
 
					function alert_ajax(xhr)
					{
 
					if (xhr.readyState==4 && xhr.status == 200 ) 
					{
					montext=xhr.responseText;
						js_table=montext.split(",");
						js_tableau=JSON.parse(js_table);
 
						Num_compte.options.length = 0;
Num_compte.options[0] = new Option('Aucun','-1');
 
for (i=0; i < js_tableau.length; i++) {
  Num_compte.options[i+1] = new Option(js_tableau[i],js_tableau[i])
 
}
 
         document.forms["test"].elements["intitule_compte"].value="";
 
 
 
 
					}
 
					}
 
 
 
 
 
 
			}

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
<form>
 <div align="center">
	 <label><b>Charges:</b></label>
 
 
 
	 <INPUT  type="radio"  name="natcompte" value="charg" checked onclick="return modif_select(this.value);"/>
	             <b><label style="margin:0 0em 0 5%">Produits :</label></b>
				 <INPUT type="radio" name="natcompte" value="prod" onclick="return modif_select(this.value);" />
				 <b><label style="margin:0 0em 0 6%">Investissements :</b> <INPUT  type="radio" name="natcompte" value="Inv" onclick="return modif_select(this.value);"/>
				 </br>
				 </br>
	 </div>
 
<input type="button" name="valide" value="Enregistrer" onclick="req_pseudo();"/>
</form>

Quand on ne soumets pas encore le formulaire( par une autre fonction ajax qui s'en occupe aussi qui est la fonction req_pseudo() sur le bouton valider d'en haut ), le chargement du champ liste se déroule correctement(fonction ajax ci-dessous) quand on clike sur un bouton

Par contre quand on clique le bouton 'Enregistrer', après si on reclique sur un autre bouton d'option , là le champ du liste ne contient que le chargement des données de la dernière exécution de la fonction ajax rattachée à l'evenemnt onclick().

J'ai l'impression que la fonction ajax appelée sur chacun des boutons radio cesse de s'excetuter si on enregistre les données en base (appel d'une autre fonction ajax).

Ce qui m’étonne vu que ça devait faire comment avant, c'est à dire re-s’exécuter si on clique sur un autre bouton.

Voilà, je sais pas c'est du à quoi

Merci de votre aides car ça peut me causer des ennuis.

Cordialement.

**andry.aime** · 22/07/2011, 08h07

Bonjour,

1- Tu n'as pas name sur ton form.

document.forms["test"].elements["intitule_compte"].value="";

.
2- Il est où ton select

.
3- Il est où la fonction qui lance la requête AJAX pour faire l'enregistrement

.
4- Soigne ton code avant de le poster pour avoir plus de lisibilité (Supprime les lignes vides, fait bien les indentations,...)

A+.

**brachior** · 22/07/2011, 09h22

100% d'accord avec andry.aime ^^
Je rajouterai aussi que dans :

Code :

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

document.forms["test"].elements["intitule_compte"].value="";

intitule_compte n'existe pas dans ton formulaire,
Ne serait ce pas plutôt natcompte ?

Et d'ailleurs, pourquoi vouloir supprimer leur valeur ?
Si tu veux les décocher c'est pas l'attribut checked plutôt ?

Pour le point 4 de andry.aime j'ajouterai aussi de suivre une seule convention ...
Je parle des positions des accolades et de la casse HTML par exemple ...
D'ailleurs, ton HTML est truffé de fautes, (je ne citerai pas tout ^^)

Code html :

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

1
2
3
4
5
6
7
8
 
<b><label style="margin:0 0em 0 5%">Produits :</label></b>
<!-- au lieu de : -->
<label style="margin:0 0em 0 5%"><b>Produits :</b></label>
 
<!-- ou encore : -->
<b><label style="margin:0 0em 0 6%">Investissements :</b>
<!-- où la balise label n'est pas fermée -->

**madina** · 22/07/2011, 12h51

Bonjour,

Excusez moi sur certains champs omis et les fautes omises sur le code html.
mais si vous avez comprismon probléme,je vous redonne le formulaire et le champ select ainsi que le champ intitule et l'ensemble des champs du formulaire.

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
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
<form name="test" action ="valider_operations.php"  method="post" >
<table border="0" align="center">
    <div align="center">
 <label><b>Charges:</b></label>
 <INPUT  type="radio"  name="natcompte" value="charg" checked onclick="return modif_select(this.value);"/>
 <label style="margin:0 0em 0 5%"><b>Produits :</b></label>
 <INPUT type="radio" name="natcompte" value="prod" onclick="return modif_select(this.value);" />
 <label style="margin:0 0em 0 6%"><b>Investissements </b>:</label> <INPUT  type="radio" name="natcompte" value="Inv" onclick="return modif_select(this.value);"/>
 </br>
 </br>
	 </div>
<tr align="center">
  <th>Num_Compte</th>
<td align="center"><select name="Num_compte" id="Num_compte" onchange="go_comptes();">
<option value="-1">Aucun</option>
<?php
        include('fonctions.php');
    connect();
$sql_comptes='SELECT Num_compte FROM Comptes where nature_compte="Charges"';
$res = mysql_query($sql_comptes) or die ('Erreur SQL !'.$sql_comptes.'
</br >'.mysql_error());;
while($row = mysql_fetch_array($res))
{
        
echo '<option value="'.$row['Num_compte'].'">'.$row['Num_compte'].'</option>';
}
?>
</select></td></tr>
<tr align="center">
<th>Désignation</th>
<td>
<div id ="intitule_compte" style="display:inline">
<input type="text" name="intitule_compte" readonly="readonly" />
</div></td>	
</tr>
<tr align="center" id="ligne_branche" style="display : none">
<th>Branche</th>
<td align="left"><label style="margin:0 0em 0 10%"><b>AT: </b></label><INPUT type=radio name="branche" checked value="AT"  />
 <label style="margin:0 0em 0 45%"><b>PT : </b></label><INPUT type=radio name="branche" value="PT" /></td>
</tr>
<tr align="center">
<th>Date_Operation</th>
<td align="center">
<input type="text" id="date_realise" name="date_realise"/></td>
</tr>
<tr align="center">
<th>Montant Operation</th>
<td align="center"><input class="numeric" type="text" name="montant_realise" id="montant_realise" /></td>
</tr>
<tr>
 <th>Reference</th>
<td align="center"><input type="text" name="reference" id="reference"/></td>
</tr>
<tr>
<th>Fournisseur</th>
<td align="center"><input type="text" name="fournisseur" id="fournisseur"/></td>
</tr>
<td colspan="2" align="center" ><input type="button" name="valide" value="Enregistrer" onclick="req_pseudo();"/>
</tr>
	</table>
</form>

Voici le code de la fonction qui lance la requête d'enregistrement, c'est
req_pseudo() :

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
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
65
66
67
68
69
70
71
72
73
74
75
function req_pseudo()
{
  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  var xhr = getXhr();
  var natcompte2= "";
   content = document.getElementById('message'); 	//zone d'affichage
   xhr.open("POST","valider_operations.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  //Ok pour la page cible
  xhr.onreadystatechange = function()
  {
    if (xhr.readyState == 4 && xhr.status == 200 ) {
	if (xhr.responseText=="OK"){
	if (confirm("L'operation a ete bien enregistrée. Voulez/vous ajouter une autre ?"))
	{
	 var optNodes = document.getElementById('Num_compte').getElementsByTagName('option');
       optNodes[0].selected = true;
       for(var i=1; i<optNodes.length; i++){
         optNodes[i].selected = null;
		 }
	document.forms["test"].elements["montant_realise"].value="";
	document.forms["test"].elements["reference"].value="";
	document.forms["test"].elements["fournisseur"].value="";
	document.forms["test"].elements["intitule_compte"].value="";
 
	Num_compte.options.length = 0;
	for (var i=0; i<document.test.natcompte.length;i++)
                {
  if (document.test.natcompte[i].checked){   
    natcompte2 = document.test.natcompte[i].value;
             }
 
      }
}
 
}
else 
{
alert(xhr.responseText);
	}
	}
sel = document.getElementById('Num_compte');
Num_compte =sel.options[sel.selectedIndex].value;
date_realise=document.getElementById('date_realise').value;
reference=document.getElementById('reference').value;
montant_realise=document.getElementById('montant_realise').value;
sel_cr = document.getElementById('code_cr');
code_cr =sel_cr.options[sel_cr.selectedIndex].value;
fournisseur=document.getElementById('fournisseur').value;
  for (var i=0; i<document.test.natcompte.length;i++)
         {
  if (document.test.natcompte[i].checked){   
    natcompte2 = document.test.natcompte[i].value;
             }
       }
  if (natcompte2=='prod')
  {
  var branche1= '';
   for (var i=0; i<document.test.branche.length;i++)
                {
  if (document.test.branche[i].checked){   
    branche1 = document.test.branche[i].value;
             }
      }
  xhr.send("code_cr="+code_cr+"&natcompte2="+natcompte2+"&branche1="+branche1+"&Num_compte="+Num_compte+"&montant_realise="+montant_realise+"&date_realise="+date_realise+"&reference="+reference+"&fournisseur="+fournisseur);
  }
	  else
	  {
 
 xhr.send("code_cr="+code_cr+"&natcompte2="+natcompte2+"&Num_compte="+Num_compte+"&montant_realise="+montant_realise+"&date_realise="+date_realise+"&reference="+reference+"&fournisseur="+fournisseur);
 
 }
 
}

Voilà mon soucis est que après l'enregistrement, la fonction attachée sur les boutons radio qui doit réinitialiser le champ select ne s'exécute plus alors il le faisait bien si on clique sur un bouton radio avant un enregistrement.
la réinitialisation du champ select se fait par un tableau javascript qui reçoit par ajax ses éléments.

C'est pas les valeurs des boutons radio que je veux supprimer, c'est la valeur du champ select que je veux effacer et recharger à chaque fois qu'un bouton radio est cliqué.

merci de votre aides

**madina** · 24/07/2011, 13h42

Bonjour,

C'etait en fait la technique de remplissage de mon champ select qui posait probléme.
je l'ai réolu par ça :

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
//-- Récupération Objet à mettre à jour  
 var Obj = document.getElementById('Num_compte');
Obj.options.length = 0;
var Opt = document.createElement('OPTION');
 Opt.innerHTML= 'Aucun';
 Opt.value ='-1';
 Obj.appendChild( Opt);
 for (i=1; i<js_tableau.length; i++)
 
        {
              //-- Création de l'élément OPTION
          var Opt = document.createElement('OPTION');
            //-- Ecriture du Texte
         Opt.innerHTML= js_tableau[i-1];
          Opt.value = js_tableau[i-1];
           //-- Ajout de l'OPTION
         Obj.appendChild( Opt);
      	                              }

Cordialement

[AJAX] Fonction Ajax sur des champs boutons radio

AJAX

Vue hybride

Discussions similaires

Partager

Partager