OVH Cloud OVH Cloud

innerHTML formulaire et FF

2 réponses
Avatar
OAM
Bonjour,

Voici un bout de code (simplifié) qui fonctionne très bien sous IE, mais pas
sous FF (ou OPERA).
Sous IE, qd on saisie une valeur dans le premier champ du formulaire et
qu'on créé un deuxième champ, la valeur du premier champ n'est pas perdue.
Sous FF on perd la valeur du champ !

Quelqu'un aurait une idée pour le faire fonctionner sous FF et OPERA ?

Merci d'avance,

Olivier.

<html>
<head>

<script type="text/javascript">
var indice_sensor=0;
function add_sensor() {
indice_sensor=indice_sensor+1;

if (indice_sensor == 1)
document.getElementById('add_sensor').innerHTML=
indice_sensor+":&nbsp;<input type='text'
name='Sensor_Name["+indice_sensor+"]' id='Sensor_Name"+indice_sensor+"'/><br
/>";
else
document.getElementById('add_sensor').innerHTML=
document.getElementById('add_sensor').innerHTML
+indice_sensor+":&nbsp;<input type='text'
name='Sensor_Name["+indice_sensor+"]' id='Sensor_Name"+indice_sensor+"'/><br
/>";
}
</script>

</head>
<body>

<form>
<div>
<span id='add_sensor'></span>
</div>
</form>
<a href="#" onClick="javascript:add_sensor()">Click</a>

</body>

2 réponses

Avatar
ASM
Bonjour,

Voici un bout de code (simplifié) qui fonctionne très bien sous IE, mais pas
sous FF (ou OPERA).
Sous IE, qd on saisie une valeur dans le premier champ du formulaire et
qu'on créé un deuxième champ, la valeur du premier champ n'est pas perdue.
Sous FF on perd la valeur du champ !


C'est normal et partagé par bien des navigateurs, et, au demeurant, bien
pratique.

On touche là le danger d'utiliser innerHTML à toutes les sauces.

Normalement innerHTML ne devrait concerner que le texte entre deux balises.


Quelqu'un aurait une idée pour le faire fonctionner sous FF et OPERA ?


Utiliser les nodes (on récupère le node puis ses enfants en spécifiant
le moyen : false ou true)

bref là pour ton cas utiliser createElement et appendChild et faire propre.


<html>
<script type="text/javascript">

var idx=0;

function addInput(idCible) {
idx ++;
var cible = document.getElementById(idCible);
var txt = document.createTextNode(idx+' : ');
var elt = document.createElement('INPUT');
elt.name = 'Sensor_Name['+idx+']';
elt.id = 'Sensor_Name'+idx;
var br = document.createElement('BR');
cible.appendChild(txt);
cible.appendChild(elt);
cible.appendChild(br);
}
</script>

<button onclick="addInput('ici');">ajout</button>
<p id="ici"></p>
</html>


voir :
http://fr.selfhtml.org/javascript/objets/document.htm
et :
http://fr.selfhtml.org/javascript/objets/node.htm

--
ASM

Avatar
OAM
Merci pour toutes ces infos !

Olivier.