Bug Javascript sous IE [Résolu/Fermé]

Signaler
-
 Kxking -
Bonjour,
J'ai écrit un javascript pour générer ou supprimer des champs d'un formulaire HTML via un bouton. Tout marche comme il faut sous Firefox, mais je m'aperçois que IE lit le javascript différement: quand je clique sur ajouter, les champs qui doivent apparaître sur plusieurs lignes dans un tableau, apparaissent les uns à la suite des autres.
J'ai regardé dans le forum mais rien ne m'aide à voir ce qu'il faut modifier pour IE (je précise que j'ai peu de connaissances en javascript.

Je copie le script en question en-dessous. Merci d'avance pour tout aide!

<script type="Javascript">
<!--
function create_champ(i){
var i2 = i + 1;
document.getElementById('input_'+i).innerHTML = '<div id="champs_'+i+'"><br><tr><td style="width: 65px;">Title</td><td colspan="5"><input type="text" name="title_'+i+'" id="ti_'+i+'" size="39"/></td></tr><tr><td style="width: 65px;">Author</td><td colspan="5"><input name="author_'+i+'" id="au_'+i+'" type="text" size="30"/></td><tr><td style="width: 65px;">Journal</td><td colspan="5"><input name="journal_'+i+'" id="so_'+i+'" type="text"size="30"/></td></tr><tr><td style="width: 65px;">Year</td><td style="width: 65px;"><input name="year_'+i+'" id="ye_'+i+'" type="text"size="4"/></td><td style="width: 65px;">Volume</td><td style="width: 65px;"><input name="volume_'+i+'" id="vol_'+i+'" type="text"size="4"/></td><td style="width: 60px;">Pages</td><td style="width: 65px;"><input name="pages_'+i+'" id="pa_'+i+'" type="text"size="4"/></td></div>';
document.getElementById('input_'+i).innerHTML += (i <= 100) ? '<span id="input_'+i2+'"><input class="input2" type="button" onClick="javascript:create_champ('+i2+')" value="+"><input type="button" value="X" onClick="javascript:supr_champ('+i+')"></span>' : '';
document.getElementById('nombre').value = i;
}
function supr_champ(i){
var Parent;
var i2 = i + 1;
var i0 = i - 1;
document.getElementById('input_'+i).innerHTML = '<input class="input2" type="button" onClick="javascript:create_champ('+i+')" value="+">';
document.getElementById('input_'+i).innerHTML += (i >= 3) ? '<input type="button" value="X" onClick="javascript:supr_champ('+i0+')">' : '';
var Obj = document.getElementById ( 'input_'+i2) ;
if( Obj) Parent = Obj.parentNode; if( Parent)
Parent.removeChild( Obj);
}
-->
</script>

4 réponses

Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
109
j'ai refais ton code tu me dis si quelque chose ne va pas

une remarque :
- tu as mis document.getElementById('nombre').value = i; mais il n'y a pas d'élément avec cet id dans la page je l'ai donc enlevé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Publications Request form</title>
	<script type="text/javascript">
	<!--
	var i=1;
	var input_add;
	function create_champ(){
		var newDiv = input_add.parentNode.insertBefore( document.createElement('div'), input_add );
		newDiv.id = 'champs_'+i;
		newDiv.innerHTML = '<table><tbody><tr><td>Title</td><td colspan="5"><input name="title_'+i+'" id="ti_'+i+'" size="40" type="text"/></td></tr><tr><td>Author</td><td colspan="5"><input name="author_'+i+'" id="au_'+i+'" size="30" type="text"/></td></tr><tr><td>Journal</td><td colspan="5"><input name="journal_'+i+'" id="so_'+i+'" size="30" type="text"/></td></tr><tr><tdstyle="width: 65px;">Year</td><td style="width: 65px;"><input	name="year_'+i+'" id="ye_'+i+'" size="4"type="text"/></td><td style="width: 65px;">Volume</td><td style="width: 65px;"><input name="volume_'+i+'" id="vol_'+i+'" size="4"type="text"/></td><td style="width: 60px;">Pages</td><td style="width: 65px;"><input	name="pages_'+i+'" id="pa_'+i+'" size="4"type="text"/></td></tr></tbody></table>';
		if(i>1) document.getElementById('input_sup').style.display = 'inline';
		if(i>100) input_add.style.display = 'none';
		i++;
	}
	function supr_champ(){
		i--;
		var Parent;
		var Obj = document.getElementById ( 'champs_'+i) ;
		if( Obj) Parent = Obj.parentNode;
		if( Parent)	Parent.removeChild( Obj);
		if(i<3) document.getElementById('input_sup').style.display = 'none';
	}
	
	window.onload = function(){
		input_add = document.getElementById('input_add');
		create_champ();
	}
	-->
	</script>
</head>
<body>
	<h1>Publications Request Form</h1>
	<form name="request" method="post" enctype="text/plain" action="mailto:XXXX@XX.com?subject='Publications requests'">
		You may copy/paste your references or use the detailed form below.<br/>
		<br/>
		<textarea rows="7" name="S1" cols="60"></textarea><br/>
		<br/>
		<input id="input_add" type="button" value="+" onclick="javascript:create_champ(this)" class="input2"/>
		<input id="input_sup" type="button" value="X" onclick="javascript:supr_champ('+i+')" style="display:none"/><br/>
		<br/>
		Comments:<br/>
		<textarea rows="5" name="S1" cols="60"></textarea><br/>
		<br/>
		<input value="Send your request" name="send" type="submit"/>
		<input value="Clear fields" name="clear" type="reset"/>
		<br/>
		<br/>
		<b> We will get back to you as soon as possible.</b>
	</form>
	</body>
</html>


chez moi ça marche avec firefox (3.5), ie (5.5, 6, 7, 8)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
109
salut
pourrais-tu donner en plus le code html qui va avec ?
en particulier le bouton ou faut cliquer et le formulaire qui sera modifié par la fonction

c'est pour pouvoir tester
Bien sûr!

Voilà le code entier de la page:

<html>
<head>
<title>Publications Request form</title>
</head>
<body>
<script language="javascript">
<!--
function create_champ(i){
var i2 = i + 1;
document.getElementById('input_'+i).innerHTML = '<div id="champs_'+i+'"><br><tr><td style="width: 65px;">Title</td><td colspan="5"><input type="text" name="title_'+i+'" id="ti_'+i+'" size="39"/></td></tr><tr><td style="width: 65px;">Author</td><td colspan="5"><input name="author_'+i+'" id="au_'+i+'" type="text" size="30"/></td><tr><td style="width: 65px;">Journal</td><td colspan="5"><input name="journal_'+i+'" id="so_'+i+'" type="text"size="30"/></td></tr><tr><td style="width: 65px;">Year</td><td style="width: 65px;"><input name="year_'+i+'" id="ye_'+i+'" type="text"size="4"/></td><td style="width: 65px;">Volume</td><td style="width: 65px;"><input name="volume_'+i+'" id="vol_'+i+'" type="text"size="4"/></td><td style="width: 60px;">Pages</td><td style="width: 65px;"><input name="pages_'+i+'" id="pa_'+i+'" type="text"size="4"/></td></div>';
document.getElementById('input_'+i).innerHTML += (i <= 100) ? '<span id="input_'+i2+'"><input class="input2" type="button" onClick="javascript:create_champ('+i2+')" value="+"><input type="button" value="X" onClick="javascript:supr_champ('+i+')"></span>' : '';
document.getElementById('nombre').value = i;
}
function supr_champ(i){
var Parent;
var i2 = i + 1;
var i0 = i - 1;
document.getElementById('input_'+i).innerHTML = '<input class="input2" type="button" onClick="javascript:create_champ('+i+')" value="+">';
document.getElementById('input_'+i).innerHTML += (i >= 3) ? '<input type="button" value="X" onClick="javascript:supr_champ('+i0+')">' : '';
var Obj = document.getElementById ( 'input_'+i2) ;
if( Obj) Parent = Obj.parentNode; if( Parent)
Parent.removeChild( Obj);
}
-->
</script>
<h1>Publications Request Form</h1>
<form name="request" method=" post "
enctype=" text/plain "
action="mailto:XXXX@XX.com?subject='Publications requests'">
You may copy/paste your references or use the detailed form below.<br>
<br>
<textarea rows="7" name="S1" cols="60"></textarea><br>
<br>
<div id="champs_1"></div>
<table>
<tbody>
<tr>
<td>Title</td>
<td colspan="5"><input name="title_'+i+'"
id="ti_'+i+'" size="40" type="text"></td>
</tr>
<tr>
<td>Author</td>
<td colspan="5"><input name="author_'+i+'"
id="au_'+i+'" size="30" type="text"></td>
</tr>
<tr>
<td>Journal</td>
<td colspan="5"><input name="journal_'+i+'"
id="so_'+i+'" size="30" type="text"></td>
</tr>
<tr>
<td style="width: 65px;">Year</td>
<td style="width: 65px;"><input
name="year_'+i+'" id="ye_'+i+'" size="4"
type="text"></td>
<td style="width: 65px;">Volume</td>
<td style="width: 65px;"><input input=""
name="volume_'+i+'" id="vol_'+i+'" size="4"
type="text"></td>
<td style="width: 60px;">Pages</td>
<td style="width: 65px;"><input
name="pages_'+i+'" id="pa_'+i+'" size="4"
type="text"></td>
</tr>
<tr>
<td colspan="6"><span id="input_2"><input
name="button" class="input2"
onclick="javascript:create_champ(2)" value="+"
type="button"></span></td>
</tr>
</tbody>
</table>
<br>
Comments:<br>
<textarea rows="5" name="S1" cols="60"></textarea><br>
<br>
<input value="Send your request" name="send"
type="submit">  <input
value="Clear fields" name="clear" type="reset">
<br>
<br>
<b> We will get back to you as soon as possible.</b>
</form>
</body>
</html>
Un grand merci à toi nEm3sis! Ca marche parfaitement.
C'est vraiment sympa d'avoir pris le temps de réécrire le script proprement : )

Pour le GetElement en trop, c'est un reste de compteur que je voulais mettre au départ.