[AJAX] Répétition d'appel de script ajax dans un même formulaire

Version imprimable

Bonjour,

Bon ben là j'ai un problème qui me dépasse complètement.

J'ai un formulaire dans lequel, je répète 3 fois la saisie des mêmes informations avec des valeurs différentes bien sûr.

J'utilise des javascripts ajax, mais du coup, il ne sais plus à quel saint se vouer puisqu'il trouve 3 fois les mêmes id et les mêmes name.

Ce code se trouve répété 3 fois dans mon script htlm.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <select name="bud_classe" id="bud_classe" onChange="goCategorie(document.getElementById('bud_classe'))" onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2"> <option value="-1"></option> <option value="3">DEPENSES COURANTES</option> <option value="2">DEPENSES FIXES</option> <option value="1">RESSOURCES</option> </select> <select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))" onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="3"> <option value="0"></option> <option value="-1">Choisir une classe</option> </select> <select name="bud_ss_categorie" id="bud_ss_categorie" onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="4"> option value="0"></option> <option value="-1">Choisir une catégorie</option> </select>
Je suis sûr que c'est possible, mais je voudrai éviter de renommer les champs.

Merci d'avance

20/09/2006, 14h03
Bisûnûrs

Tu fais une boucle pour afficher 3 fois ce code ?
20/09/2006, 14h42
lodan

Oui, c'est pour saisir des lignes de mouvements comptable, je veux pouvoir saisir 3 lignes en même temps.

Chaque ligne est identifiée analytiquement par classe, catégorie et sous catégorie.

Ben par exemple si c'est un while que tu fais :

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
<?
$i = 0;

while(tacondition){

/**** tes <select> ****/

?>
<select name="bud_classe<?=$i?>" id="bud_classe<?=$i?>" onChange="goCategorie(document.getElementById('bud_classe<?=$i?>'))" 
onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
...
</select>

<select name="bud_categorie<?=$i?>" id="bud_categorie<?=$i?>" 
onChange="goSsCategorie(document.getElementById('bud_categorie<?=$i?>'))"
onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="3">
...
</select>

<select name="bud_ss_categorie<?=$i?>" id="bud_ss_categorie<?=$i?>" 
onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="4">
...
</select>

<?
$i++;
}
?>

Comme ça tes <select> n'ont plus le même id et n'évolueront plus en même temps.

J'espère que j'ai répondu à ta question.

Oui, j'y ai pensé, j'ai essayé, je suis en smarty donc mon index est différent, mais le principe est le même.

Dans mon javascript que tu connais, je dois changer ces lignes

Code:

1
2
3
4
5
var liste_select = document.getElementById('bud_categorie');
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_categorie').options.length > 0){
         document.getElementById('bud_categorie').removeChild(document.getElementById('bud_categorie').options[0]);

par

Code:

1
2
3
4
5
var liste_select = document.getElementById(param2);
      var tmp = document.createElement('option');
 
      while(document.getElementById(param2).options.length > 0){
         document.getElementById(param2).removeChild(document.getElementById(param2).options[0]);

Et dans mon formulaire html rajouter un paramètre :

Code:

1
2
<select name="bud_classe<?=$i?>" id="bud_classe<?=$i?>" onChange="goCategorie(document.getElementById('bud_classe<?=$i?>'),document.getElementById('bud_categorie<?=$i?>').id)" 
onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">

Si c'est bon, c'est que je commence à comprendre et j'en serai très content.

Non, à prioris tu dois changer ton javascript là :

Code:

1
2
3
4
5
var liste_select = document.getElementById('bud_categorie');
var tmp = document.createElement('option');
 
while(document.getElementById('bud_categorie').options.length > 0){
   document.getElementById('bud_categorie').removeChild(document.getElementById('bud_categorie').options[0]);

par :

Code:

1
2
3
4
5
var liste_select = document.getElementById('bud_categorie0');
var tmp = document.createElement('option');
		
while(document.getElementById('bud_categorie0').options.length > 0){
   document.getElementById('bud_categorie0').removeChild(document.getElementById('bud_categorie0').options[0]);

Où le chiffre en rouge correspond à $i dans ton code

Code:

<select name="bud_categorie<?=$i?>" ...

Je passe mon "$i" en paramètre de toute façon pour pouvoir le récupérer dans le javascript.

Ce qui donnera :

Code:

1
2
3
4
5
var liste_select = document.getElementById('bud_categorie'param2);
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_categorie'param2).options.length > 0){
         document.getElementById('bud_categorie'param2).removeChild(document.getElementById('bud_categorie'param2).options[0]);

Code:

1
2
3
4
5
var liste_select = document.getElementById('bud_categorie'+param2);
      var tmp = document.createElement('option');
		
      while(document.getElementById('bud_categorie'+param2).options.length > 0){
         document.getElementById('bud_categorie'+param2).removeChild(document.getElementById('bud_categorie'+param2).options[0]);

Merci bisounoursjos,

j'ai directement fait comme ceci :
Code:

1 2 3 4 5 var liste_select = document.getElementById(param2); var tmp = document.createElement('option'); while(document.getElementById(param2).options.length > 0){ document.getElementById(param2).removeChild(document.getElementById(param2).options[0]);
Qui reprend directment sur mon formulaire l'id et le n°

Merci ça fonctionne très bien.

J'ai testé avec 3 lignes puis 5 puis 10 ça fonctionne.

Je vais donc mettre une popup intermédiaire pour demander à l'utilisateur combien de lignes, il veut ajouter.

Merci