Sujet Précédent Sujet Suivant

Bug Javascript sous IE

Résolu/Fermé
Kxking - 6 juil. 2009 à 12:50
 Kxking - 6 juil. 2009 à 16:06
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

Réponse 1 / 4
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
6 juil. 2009 à 15:08
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 lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
6 juil. 2009 à 12:53
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
6 juil. 2009 à 13:23
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
6 juil. 2009 à 16:06
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

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Problème Facebook rencontre
Margalle -
Jpf -

17 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Problème musiques étranges sur story instagram
somnorun -
SN -

21 réponses