Bug Javascript sous IE

Résolu
Kxking -  
 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>
A voir également:

4 réponses

Réponse 1 / 4
nEm3sis Messages postés 710 Date d'inscription   Statut Membre Dernière intervention   113
 
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
Réponse 2 / 4
nEm3sis Messages postés 710 Date d'inscription   Statut Membre Dernière intervention   113
 
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
0
Réponse 3 / 4
Kxking
 
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>
0
Réponse 4 / 4
Kxking
 
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.
0

Discussions similaires

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse
Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre
Ancaro13 -
glandu -

3 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse