[DOM] innerHTML value input firefox

Version imprimable

31/12/2005, 11h07
Teufboy

[DOM] innerHTML value input firefox
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:

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 ;-)

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:

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++;
  }

exemple:

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
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>

31/12/2005, 13h47
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:

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:

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

Citation:

Envoyé par javatwister

exemple:

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
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 ... :(