11548 sujets

JavaScript, DOM et API Web HTML5

Probleme ie formulaire [resolu!!]

bonjour, j'ai un soucis avec internet explorer. Je veux afficher deux zone de texte et deux span quand on selectionne une option specifique d'un select. Sous firefox ca marche impec mais sur internet explorer il ne se passe rien.
voici mon code javascript:
<SCRIPT language="JavaScript">
<!--   

function afficher() {
   
   if (document.formu.objet.value=="Devis")
         {
        //if (document.getElementById("delai1").style.display=='none')
      document.getElementById("delai1").style.display="block";
        document.getElementById("budget1").style.display="block";
        document.getElementById("delai2").style.display="block";
        document.getElementById("budget2").style.display="block";
        }
    else 
    {
    document.getElementById("delai1").style.display='none';
    document.getElementById("budget1").style.display='none';
        document.getElementById("delai2").style.display='none';
        document.getElementById("budget2").style.display='none';
    
    
    }
}
//-->


et puis mon formulaire:

<form method="post" action="envoi.php" name="formu">
    
    Votre adresse mail: <input type="text" name="mailclient" size="40"></input><br><br>
    Le chemin de votre logo: <input type="file" name="logoclient" size="50"></input><br><br>
    Objet du message: <select name="objet" onChange="afficher()">
    <option selected>Question</option>
    <option>Remarque</option>
    <option>Devis</option>
    </select><br><br>
    
    <span id="delai1" name="delai1" style="display:none"> Délai: </span>
    <input id="delai2" name="delai2" type="text" size="20" style="display:none">
    </input>
    <span id="budget1" name="budget1" style="display:none"> Budget: </span>
    <input id="budget2" name="budget2" size="20" type="text" style="display:none"></input>
   
    <br>Votre message:<br>
    <textarea rows="7" cols="34" type="text" name="message"></textarea><br><br>
    
    <input type="submit" name="envoyer" value="Envoyer" onClick=afficher(formu);></input>
     <input type="reset" name="reset" value="Reset"></input>
   

    </form>


est ce que ca vous inspire quelque chose ou aurais je fait une grossiere erreur?
merci
Modifié par ours-blanc- (07 Dec 2006 - 22:39)
2-3 remarques :
- la balise "input" n'a pas de balise fermante, comme "img" "hr" ou "br" par exemple
- IE a du mal avec les objets, mieux vaut donner un id à chaque élément sur lesquels tu veux agir et utiliser document.getElementById() pour y accéder
- un objet "select" n'a pas forcément l'attribut "value" (sous firefox ça marche mais pas forcément ailleurs !) mieux vaut ne pas l'utiliser... à la place il vaut mieux employer quelque chose du style :
document.getElementById("monselect").options[document.getElementById("monselect").selectedIndex].value

pour récupérer la valeur affichée dans un select
- inutile de placer ton code javascript entre les balises de commentaire html... je ne pense pas qu'un singlé; navigue sur le net en utilisant un navigateur vieux de 15 ans...
- il ne vaut mieux pas mettre 
<script language="javascript"></script>
d'une part parce que c'est imparfait (ok c'est du javascript, mais quelle version ???) et puis ça mets IE dans des états pas possibles... mieux vaut utiliser 
<script type="text/javascript"></script>
à la place.
- pourquoi t'emmerder à afficher et cacher chaque élément alors que tu pourrais n'en afficher/cacher qu'un seul ? (une div par exemple !)

En ce qui concerne ton problème :
Pour le code HTML : 

<form method="post" action="envoi.php" name="formu">
	Votre adresse mail: <input type="text" name="mailclient" size="40"><br /><br />
	Le chemin detypere logo: <input type="file" name="logoclient" size="50"><br /><br />
	Objet du message: 
	<select name="objet" id="objet" onchange="afficher(this.selectedIndex);">
		<option selected="selected">Question</option>
		<option>Remarque</option>
		<option>Devis</option>
	</select><br /><br />
	<div id="complementdevis" style="display:none;">
		Délai: <input id="delai" name="delai" type="text" size="20" />
		Budget: <input id="budget" name="budget" size="20" type="text" />
	</div>
	<br>Votre message:<br>
	<textarea rows="7" cols="34" type="text" name="message"></textarea><br><br>
	<input type="submit" name="envoyer" value="Envoyer" />
	<input type="reset" name="reset" value="Reset" />
</form>

J'ai reformatté le code en XHTML, tu peux l'utiliser comme ça, ça marchera.

Pour le javascript : 

<script type="text/javascript">
function afficher(index) {
	if (index==2) {
		document.getElementById("complementdevis").style.display="block";
	} else {
		document.getElementById("complementdevis").style.display="none";
	}
}
</script>

si tu as des questions...
Modifié par Jeff-com (06 Dec 2006 - 03:52)
Merci beaucoup pour ces precieux conseils, ca marche bien maintenant et ca m'ote une epine du pied tout en comprenant ce qu'il se passe!
merci!
Eldebaran a écrit :
Salut,Comment ça ?


arf je me suis mal exprimé... je veux dire que lorsqu'on essaye d'accéder à un élément par son nom comme le faisais ours-blanc- avec 
document.formu.objet.value

IE avait souvent un comportement irrationnel, en tout cas c'est ce que j'ai remarqué... le problème c'est que parfois ça fonctionne très bien et parfois ça merdouille complet... sans qu'on puisse vraiment comprendre pourquoi (en tout cas j'ai pas pu déterminer pourquoi ça merdouille quand ça merdouille)... per exemple, le code d'ours-blanc- était bon, ça aurait dû fonctionner, mais si on ajoute la ligne suivante à sa fonction afficher() : 
 alert(document.formu.objet.value);

on voit que IE renvoie une valeur vide (ie: "") et n'arrive donc pas à comprendre quel est l'objet à utiliser... et il n'y a aucune raison apparente pour laquelle IE agit ainsi...

désolé, je m'étais mal exprimé

ours-blanc- : heureux d'avoir pu t'aider Smiley smile un petit "résolu" dans le titre ?
Modifié par Jeff-com (06 Dec 2006 - 15:10)
Sujet clos
Aller à