Multiples incompatibilités avec IE

Version imprimable

SAlut à tous,

Mon site marche super sous Firefox et quelques problèmes demeurent sous IE... Je ne trouve pas de solutions sur le net...

Tout d'abord, j'ai un formulaire et un bouton qui fait appel à une fonction javascript. Au début je pensais que ça ne marchait car mon bouton était une image... Voici mon code :

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
33
34
35
36
 
<form id="formulaire" name="formulaire" onSubmit="return verif()">							     
									<fieldset>
									     <p>
										    <form name="form-test" id="form-test" action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value" >
									            <label><strong>Nom de la personne: </strong></label><br>
									            <input type="text" name="champ-texte" id="champ-texte" autocomplete="off" class="champ">
											</form>
											<br>
 
											<label><strong>Nom de l'organisme : </strong></label><br>
											<input type="text" name="nomOrg" id="nomOrg" autocomplete="off" value="" class="champ"><a href="javascript:ouvreFenetre('listeOrg.php');"><img src="images/ideeLogo.jpg" title="Aide" alt="aide" style="width:18px; height:18px; border:none;"></a>
 
											<br><span style="font-style:small; color:red;">* Un des deux champs ci-dessus doit &ecirc;tre obligatoirement renseign&eacute;</span>
											<br><br><br>
 
											<label><strong>Fonction exerc&eacute;e : </strong></label><br>
											<input type="text" name="fct" id="fct" autocomplete="off" value="" class="champ"><a href="javascript:ouvreFenetre('listeFct.php');"><img src="images/ideeLogo.jpg" title="Aide" alt="aide" style="width:18px; height:18px; border:none;"></a>
 
											<br>
											<label><strong>Commune / Code postal : </strong></label><br>
											<input type="text" name="lieu" id="lieu" autocomplete="off" value="" class="champ"><a href="javascript:ouvreFenetre('listeLieu.php');"><img src="images/ideeLogo.jpg" title="Aide" alt="aide" style="width:18px; height:18px; border:none;"></a>
 
											<!--[if IE]>
											<input type="submit" name="valider" id="valider" value="Valider" align="justify">
											<![endif]-->
 
											<!--[if !IE]><-->
											<input type="image" src="images/boutonPerso.png" name="valider" id="valider"  align="justify" >
											<!--><![endif]-->
 
										</p>
 
 
										 </fieldset>
									</form>

Je suis sûr que ma fonction verif() marche, testée sous Firefox.

Merci d'avance.

15/05/2008, 15h17
Auteur

bonjour,

pourquoi deux balises form ?
15/05/2008, 15h19
E.Bzz

Citation:

Envoyé par Auteur

pourquoi deux balises form ?

Visiblement pour les tests ... et c'est ce qui plante le reste :aie:

Jamais de <form> imbriqués !

A+

Le code correct est :
Code:

1 2 3 4 
Après multilples tests :aie:

Réponse à vos questions :
Car le second fait appel au principe d'autocomplétion (tuto sur ce site) juste pour le champ "Nom de la personne" ...
Sous Firefox ça marche bien.
Ensuite je me suis aperçu dans ma fonction verif() que :
Code:

1 2 3 4 5 6 //Ne marche pas avec IE document.forms[X].elements[Y].value ; //Pour que IE accepte document.getElementById(X).value ;
Donc je pense que vous avez raison mais comment modifier mon code pour n'avoir qu'un seul <form></form> et que mon système d'autocomplétion marche toujours ?

Voici le bout de code pour l'autocomplétion :
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> window.onload = function(){ initAutoComplete(document.getElementById('form-test'), document.getElementById('champ-texte'),document.getElementById('bouton-submit')); } </script>

15/05/2008, 16h13
E.Bzz
Citation:

Envoyé par kev42100

comment modifier mon code pour n'avoir qu'un seul <form></form> et que mon système d'autocomplétion marche toujours ?

En changeant "form-test" par "formulaire" dans ton script d'autocompletion et en enlevant les balises de "form-test" ...

Sinon :
NON ce code n'est correct :
Code:

1 2 3 
On ne fait JAMAIS de fonction de verif sur le onclick (et non onClick, et sans "javascript:") d'un bouton submit.
Il faut passer par le onsubmit du form.
... comme tu l'avais fait avant, quoi ...

A+

Oui pas faux, mais ça ne marchait pas à un autre endroit. En ayant rajouté onClick pour IE cela fonctionnait. J'ai résolu l'autre problème et j'ai donc enlevé onClick().
Pour quel genre de méthode est-il alors utilisé ?

Sinon j'ai bien suivi votre conseil pour l'autocomplétion. Mais cela entraîne autre petit problème dont je pense savoir l'origine mais malgré mes changements rien de mieux. Le soucis est que si une réponse se propose et que je clique dessus, la réponse ne "va" pas dans le champ et comme une impression que la page se recharge (pas sûr).....

Voici donc l'appel de la fonction autocompletion modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript" src="likeGoogleSuggest.js"></script> <script type="text/javascript"> window.onload = function(){ initAutoComplete(document.getElementById('formulaire'), document.getElementById('champ-texte'),document.getElementById('bouton-submit')); } </script>
Et maintenant mon champ Nom de la personne sans les <form></form>
Code:

1 2 3 <label><strong>Nom de la personne: </strong></label><br> <input type="text" name="champ-texte" id="champ-texte" autocomplete="off" class="champ" action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value">
Ainsi que le début de la fonction autocompletion :
Code:

1 2 3 4 5 6 7 8 9 function initAutoComplete(form,field,submit){ _documentForm=form; _inputField=field; _submitButton=submit; ... ... ... }

15/05/2008, 16h55
E.Bzz

Je connais pas la fonction initAutoComplete(), mais si elle a besoin du bouton-submit, c'est peut-être pour l'activer (et donc recharger la page), non ?

A+

Quand j'avais mes 2 forms ça marchait ...
Et j'en suis sûr ça ne peut venir du code de l'autocompletion :
Voici les arguments que je fournis à la fonction :
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> window.onload = function(){ initAutoComplete(document.getElementById('formulaire'), document.getElementById('champ-texte'),document.getElementById('send')); } </script>
Dans son code, voici les 3 arguments qui seront initialisés :
Code:

1 2 3 4 var _documentForm=null; // le formulaire contenant notre champ texte var _inputField=null; // le champ texte lui-même var _submitButton=null; // le bouton submit de notre formulaire
En pensant que ça pouvait venir de mon bouton "image" j'ai mis un "submit".
Voici une partie de mon formulaire :
Code:

1 2 3 4 5 6 7 8 9 <form id="formulaire" name="formulaire" onSubmit="return verif()"> <br> <label><strong>Nom de la personne: </strong></label><br> <input type="text" name="champ-texte" id="champ-texte" autocomplete="off" class="champ"> <input type="submit" name="send" id="send" value="Send"> </form>
Toujours ce soucis,lorsque je clique sur une suggestion de ma liste, ça ne remplit pas le champ :arf: et ça recharge la page :evilred: !!!!