"Impossible d'obtenir la propriété type" sous IE6

Bonjour,

Je souhaite modifier le type de plusieurs champs (de 'hidden' à 'text' et inversement) d'un formulaire (form1) grâce à une fonction JavaScript que voici :

function affiche_parents() {
	
		if (document.form2.checkbox1.checked == true || document.form2.checkbox2.checked == true) {
			document.form1.p_patro.type = 'text';
			document.form1.p_preno.type = 'text';
			document.form1.m_patro.type = 'text';
			document.form1.m_preno.type = 'text';
		} else {
			document.form1.p_patro.type = 'hidden';
			document.form1.p_preno.type = 'hidden';
			document.form1.m_patro.type = 'hidden';
			document.form1.m_preno.type = 'hidden';
		}
	}

Cette fonction est appelée par une action onClick associée à une case à cocher d'un second formulaire (form2). Tout fonctionne parfaitement sous FF2. Mais IE6 génère une erreur JavaScript : "Impossible d'obtenir la propriété type. Cette commande n'est pas prise en charge". Qu'est-ce qui pourrait gêner IE6 dans cette fonction ?

Voici le code HTML :

<form name="form1">
<input name="patro" type="text" />
<input name="p_patro" type="hidden" id="p_patro" />
<input name="preno" type="text" />
<input name="p_preno" type="hidden" id="p_preno" />
<input id="ep_patro" name="ep_patro" type="hidden" />
<input name="m_patro" type="hidden" id="m_patro" />
<input id="ep_preno" name="ep_preno" type="hidden" />
<input name="m_preno" type="hidden" id="m_preno" />
</form>

<form name="form2" method="post" action="liste.php?recherche=rechercher">

<input name="checkbox1" type="checkbox" class="checkbox" value="B" onClick="affiche_parents()" />
<input name="checkbox2" type="checkbox" class="checkbox" value="N" onClick="affiche_parents()" />

</form>

NB : Pourquoi 2 formulaires ? J'en ai besoin pour une tierce fonction JavaScript qui utilise d'autres champs de mes formulaires et que je n'évoquerai pas ici.

Merci à ceux qui voudront bien m'aider.
Modifié par fredve (29 May 2007 - 19:39)

Utilise cette fonction codée par Gatsu35 :

    function setType(node, type) {
      try {
           node.type = type;
      } catch(e) {
           if (node.outerHTML) {
               node.outerHTML=node.outerHTML.replace(/\btype=\w+\b/,'type="text"');
           }
      }
    }

Edit : Et evite de passer par name pour catcher les inputs
Modifié par Shinuza (29 May 2007 - 20:54)

Merci de ta réponse.

Excuse mon ignorance, mais à vrai dire je suis un amateur en JavaScript, et là j'aurais besoin d'explications sur ce code que tu me soumets. Je n'ai pas retrouvé le post de Gatsu35 à ce sujet. A quoi correspondent "node", "catch(e)" et "outerHTML" par exemple ?

Enfin, je ne savais pas qu'il était déconseillé d'utiliser l'attribut "name" pour manipuler les INPUT ? Quel en est la raison ?
Modifié par fredve (29 May 2007 - 21:53)

Dans l'ordre, tu appelles la fonction, et tu lui passes en params, l'élement dont tu veux changer le titre, et le nouveau titre.

Dans l'ordre, la fonction essaye de changer le type directement (ce qui fonctionne sur tous les navigo sauf ie), puis une exception est levée, puis catché, et on rentre dans le cas IE.

On utilise outerHTML qui correspond au code HTML du node (propriété qui n'existe que sous IE) et on remplace la partie type="quelquechose" par type="text".

Au lieu de faire

document.form1.p_patro.type = 'text';

tu fais

setType(document.form1.p_patro,"text")

Merci beaucoup Shinuza, tu es vraiment rapide.

Cela fonctionne donc bien sous IE6, mais en partie seulement. Je m'explique : sans modifier mon code HTML, j'ai redéfini ma fonction affiche_parents() comme suit :

function affiche_parents() {
	
		if (document.form2.checkbox1.checked == true || document.form2.checkbox2.checked == true) {
			setType(document.form1.p_patro,"text");
		} else {
			setType(document.form1.p_patro,"hidden");
		}
	}

Cette dernière fait appel à la fonction que tu m'as donné et que j'ai modifié comme suit :

function setType(node, type) {
      try {
           node.type = type;
      } catch(e) {
           if (node.outerHTML) {
		   		var r = 'type="' + type + '"';
				//alert(r);
               node.outerHTML=node.outerHTML.replace(/\btype=\w+\b/,r);
           }
      }

Un seul inconvénient subsiste dans le else{} de la fonction affiche_parents() : la fonction setType(document.form1.p_patro,"hidden") ne semble pas pouvoir remplacer la chaîne /\btype=\w+\b/ en 'type="hidden"'. Il n'y a pourtant aucun message d'erreur. Est-ce que j'ai oublié quelque chose ?

function setType(node, type) {
      try {
           node.type = type;
      } catch(e) {
           if (node.outerHTML) node.outerHTML=node.outerHTML.replace(/\btype=\w+\b/,'type="'+type+'"');
      }
}

Utilise plutôt ça, ça marchera, il est trop mauvais

Malgré ta rapidité, la qualité de tes réponses, et ta syntaxe impeccable, le dernier petit souci énoncé n'est pas résolu. Les modifications que tu as proposées ne changent rien : l'action de la partie else {} du code suivant semble toujours ne pas pouvoir s'appliquer en IE6 :

function affiche_parents() {	

	if (document.form2.checkbox1.checked == true || document.form2.checkbox2.checked == true) {

			setType(document.form1.p_patro,"text");

	} else {

			setType(document.form1.p_patro,"hidden");

	}

}

Si tu as une solution je suis preneur. Sinon merci quand même.
Modifié par fredve (30 May 2007 - 22:32)