Discussion :

[Teufboy]

Bonjour à tous,
Je test la création d'un formulaire avec ajout de ligne, mais je ne sais pas si je m'y prends de la façon correcte.
Je récupère le contenu des champs texte de mon formulaire avec document.getElementById('...').innerHTML puis j'y ajoute une ligne comme il est fait sur le tut http://robloche.free.fr/javascript/js_request/test.html.
Alors ma première question, est-ce que c'est une bonne aproche ?
Ma deuxième question et plus pratique, quand je saisis les champs text du formulaire sous FireFox, puis que je récupère le contenu avec innerHTML, ajoute une ligne puis réaffiche, le contenu des input déjà saisi s'efface alors que sous IE c'est ok.

Voici la fonction

Code :

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

1
2
3
4
function addFourniture() {
    document.getElementById("varFourniture").innerHTML +="<input type='text' name='fourniture" +max_var_Fourniture + "' size='142'><br>";
    ++max_var_Fourniture;
  }

Merci de votre aide ;-)

[siddh]

salut,
alors tu peux faire comme ça mais je te conseil de le faire en utilisant le dom plutot (bientot dans la faq javascript ) :

Code :

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

1
2
3
4
5
6
7
8
9
function addFourniture() {
    var lediv = document.getElementById("varFourniture");
    var inp = document.createElement("input");
    inp.type="text";
    inp.name=name="fourniture" +max_var_Fourniture;
    lediv.appendChild(inp);
    lediv.appendChild(document.createElement("br"));
    max_var_Fourniture++;
  }

[javatwister]

exemple:

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
<script type="text/javascript"> 
 
 
function gere(b){
c=document.getElementById("cadre");
l=c.getElementsByTagName("input");
if(b=="plus"){
	if(l.length<10){
		var ch=document.createElement("input");
		ch.type="text";
		ch.name="t"+l.length;
		ch.id="t"+l.length;
		ch.style.display="block";
		c.appendChild(ch)
	}
}
else if(l.length>1){
		c.removeChild(c.lastChild)
	}
}
 
</script>
 
<form id="f" action="">
<p>
<input type="button" id="plus" value="ajouter un champ" onclick="gere(this.id)" />
<input type="button" id="moins" value="enlever un champ" onclick="gere(this.id)" />
<p>
<p id="cadre">
<input name="t0" id="t0" type="text" />
</p>
</form>

[sekaijin]

un champs input n'a pas de innerHTML le inner corresponds à la partie entre la balise ouvrante et la balise fermante
un input est une balise vide

quoi qu'il en soit il est beaucoup plus propre et portable d'utiliser les fonction du DOM

Code :

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

1
2
myinput = document.getElementById("varFourniture");
thevalue = myinput.getAttribute("value");

pour ce qui est de innerHTML c'est un ajout de bill
il est préférable d'utiliser la fonction du DOM getText qui retourne une référence sur le contenu de la balise

Code :

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

1
2
3
4
5
6
<textarea id="un_texte">coucou machin</textarea>
 
 
mytextarea = document.getElementById("un_text");
mytext = mytextarea.getText();
mytext = mytext + " chose";

A+JYT

[Maxoo]

exemple:

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
<script type="text/javascript"> 
 
 
function gere(b){
c=document.getElementById("cadre");
l=c.getElementsByTagName("input");
if(b=="plus"){
	if(l.length<10){
		var ch=document.createElement("input");
		ch.type="text";
		ch.name="t"+l.length;
		ch.id="t"+l.length;
		ch.style.display="block";
		c.appendChild(ch)
	}
}
else if(l.length>1){
		c.removeChild(c.lastChild)
	}
}
 
</script>
 
<form id="f" action="">
<p>
<input type="button" id="plus" value="ajouter un champ" onclick="gere(this.id)" />
<input type="button" id="moins" value="enlever un champ" onclick="gere(this.id)" />
<p>
<p id="cadre">
<input name="t0" id="t0" type="text" />
</p>
</form>

Je déterre un vieux sujet, mais j'ai le même problème, et je suis tout content d'avoir vu cette solution, sauf que sous IE, ça nous demande d'autorisé le contenu activeX etc ... donc pas tip top ...