Discussion :

[sativa808]

Bsoir,
eh oui meme un samedi soir, on se relache pas!

Alors, j ai eu la bonne idée de creer un formulaire avec la possibilité de le cloner pour faire de la saisie en masse, (des articles en l'occurence).
D'ailleurs c'est ici même que j ai appris à faire ça avec le DOM!

Donc ça c'est bon.
Ensuite sur l'un des champs du formulaire, j'y ai ajouté une requete XMLHTTPREQUEST d'autosuggestion , et là rien ne vas plus!
C'est à dire que sur le noeud de référence c'est ok, mais pas sur les clones!

je pense à un problème d'ID qui n'est pas incrementer, et c'est le cas d'ailleurs.
Mais je sais pas faire, ou plutôt à quel endroit agir?

1. dans la fonction ajouter() celle qui clone mon formulaire(mon fieldset plutôt). en commentaire j'avais tenter ç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
 
function ajouter(){  
i++;	
var obj = document.getElementById('field');
var form = document.getElementById('form1');
var div = document.getElementById('field_div');
var field = div.cloneNode(true);/*clonage*/
var button = document.getElementById('writeroot');
field.style.display='block';	
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
//field.id= this.id+i;
button.parentNode.insertBefore(field,button);
}

j'imagine qu en incrementant l'ID, il faudra mofifier l'appel XHR egalement, du genre:

Code :

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

1
2
3
4
function autosuggestReply() {
if(xhr.readyState == 4){
	var response = xhr.responseText;
	e = document.getElementById('results'+i);

bon , je vai encore chercher, peut etre à bientot, si vous savez faire, merci

[sativa808]

Voici la nouvelle fonction ajouter():

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
 
n=0;
count=1;
function ajouter(){  
count++;	
var obj = document.getElementById('field');
var form = document.getElementById('form1');
var div = document.getElementById('field_div');
var field = div.cloneNode(true);/*clonage*/
var button = document.getElementById('writeroot');
div.style.display='block';	
/*pour que les champs soient vide par la suite*/
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
/*copie au bon endroit*/
//form.appendChild(field); 
//field.id= this.id+i;
search = document.getElementById('search-q');
 search.id='search-q'+count;
result=document.getElementById('results');
 result.id='results'+count;
 
 
button.parentNode.insertBefore(field,button);
//form.insertBefore(field,button);
n++ ;
}

Donc les ID des input sont bien incrementés, mais au bout de deux clones, j'ai une erreur, "search is null", et en effet, le div de référence a disparu au bout de deux clonages,donc circulez il n'y a plus rien à cloner!!

et il reste

Code :

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

1
2
3
4
 
<div><input id="id2" /> plus le reste du div </div>
<div><input id="id3" /> plus le reste du div </div>
<div><input id="id2" /> plus le reste du div </div>

notez la double présence de l'id numero 2.

[SpaceFrog]

1) nommer ue variable form ...

Code :

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

var form

c'est chercher les ennuis ...

2) Ensuite au niveau de clonage, changes tu l'id du div cloné ?
l'id doit etre unique sur la page ...

3) pour terminier changes tu les names de tes elements...

Pout ajouter dynamiquement des formulaires, jette plutot un oeil sur ce post :
http://www.developpez.net/forums/d53...ynamique-form/

[sativa808]

merci de t'interessé , car sui paumé,
1) ok pour la variable (renommée)
2) Bah non, vu que je fais un clonenode, le div global garde cet id, mais je m'en sers que pour ça!
3) euh idem pour les names,

j'ai deja lu ton code sur les form dynamique, mais vu que j'etais partis en mode construction DOM, si je chamboule tout maintenant, ça risque de pas aller.
D'ailleurs c'est par rapport aux names que ton code est interressant non?

Donc pr résumé, j ai:
un div de réference , une fonction ajouter(div), un appel ajax sur un champs text du form(autosuggest)
et voilà le soucis est bien de replacer la reponseText au bon endroit, et de pouvoir en recuperer les valeurs ensuite!

[SpaceFrog]

si tu clones ton div ... tu as plusieurs divs avec le même id non ?

[sativa808]

Exact, code source a l'appui,
en fait dans la fonction ajouter, j'incrémente que quelques id's (ceux où doivent se placer le retour de la requête ajax).

dc je devrais incrementer tous les Id's ?

Par contre je comprend toujours pas pourquoi mon div de réference disparait au bout du deuxième clonage. La protection par 'display:none' semble adequat.
le form de base

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
 
<form>
<div id="field_div" >  
      <fieldset id="field" ><!--style="display:none" -->
      <legend>article à deposer</legend>
 
 <div><p><label>marque</label></p>
 
	<input name="searchq[]" id="search-q" type="input" onkeyup="javascript:autosuggest(this.id)" autocomplete="off" />
       <input type="hidden" id="cach" name="marque[]" />
	<div class="update" name="result" id="results"></div>
 
<a href="popup.php" onclick="window.open(this.href,'popup','width=300,height=250');return false;">ajouter une autre marque </a>
</div>        
 
<a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" >supprimer  </a>
 <input type="hidden" name="test[]" value="" /> </fieldset> </div> 
 
 <span id="writeroot"></span>
 <input type="submit" name="submit" id="submit"value="Valider" /> OU <input name="button" type="button" onclick="ajouter();" value="Article supplémentaire" />  
 
 </form>

nouvelle fonction ajouter()

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
 
n=0;
for (var count=0;count<200; count++){
function ajouter(){  
 
var obj = document.getElementById('field');
var frm = document.getElementById('form1');
var div = document.getElementById('field_div');
var field = obj.cloneNode(true);/*clonage*/
var button = document.getElementById('writeroot');
 
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
 
var search = document.getElementById('search-q');
     search.id='search-q'+count;
var marque = document.getElementById('cach');
      marque.id= 'cach'+count;
     result=document.getElementById('results');
     result.id='results'+count;
obj.style.display='block';	
 
button.parentNode.insertBefore(field,button);
 
n++ ;
} }

@++