Forum d'entraide PHPFrance

BOnjour, j'ai un gros problème. J'ai fait un script qui marche parfaitement sur Mozilla et qui marche sur IE si je retire un tableau HTML. Il s'agit d'un script permettant d'avoir des listes déroulantes liés.

Voici le code HTML

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<style type="text/css">
body {color:black;}
body,td,th {font-family: Garamond; font-size: 14px;	font-weight: bold;}
a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:hover {text-decoration: none; font-size: 14px;	font-style: italic;	color: #000000;}
a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;}
a { font-size: 14px; font-weight: bold;}
.bordure, .bordure th, .bordure td {border: 2px solid black;border-collapse:collapse;} 
.pasbordure, .pasbordure th, .pasbordure td{border:none}
.texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;	vertical-align: middle;}
 </style>

<script language="javascript" src="http://mmcca/alliance du centre/function.js"></script>

<body background="http://mmcca/alliance du centre/fond.jpg" style=" background-position:center top; background-repeat:no-repeat " OnLoad="adjust(); ">

<div id="contener" style="overflow:auto; position:absolute; left:0px ; top:0px; width:790px; height:580px; z-index:10; padding-right: 10px; text-align: justify;">

<div align="right"><a href="http://mmcca/alliance du centre/deconnexion.php">Se déconnecter</a></div>

Profil de orgerix
<script language='javascript'>
var tableau=new Array();
tableau['Comté du Périgord-Angoumois']='<option>Angoulême</option><option>Bergerac</option><option>Castillon</option><option>Périgueux</option><option>Sarlat</option>';
tableau['Duché du Bourbonnais Auvergne']='<option>Aurillac</option><option>Bourbon</option><option>Clermont</option><option>Montbrisson</option><option>Montluçon</option><option>Montpensier</option><option>Moulin</option><option>Murat</option><option>Polignac</option><option>Thiers</option>';
tableau['Comté du Limousin et de la Marche']='<option>Bourganeuf</option><option>Guéret</option><option>Limoges</option><option>Rochechouart</option><option>Tulle</option><option>Ventadour</option>';
tableau['Duché de Tourraine']='<option>Chinon</option><option>Loches</option><option>Tours</option><option>Vendome</option>';tableau['Comté du Poitou']='<option>La Rochelle</option><option>La Trémouille</option><option>Niort</option><option>Poitiers</option><option>Saintes</option><option>Thouars</option>';
tableau[0]='a';
</script>
<table class="bordure">
 <tr>
  <th>Nom</th>
  <th>Grade</th>
  <th>Duché/Comté</th>
  <th>Ville</th>
  <th>Action</th>
 </tr>
 <tr><form action="modifiermembre.php" method="post">
  <td><input type="text" name="nom" value="test" readonly="true"></td>
  <td><select name="grade"><option selected>CaC</option><option>visiteur</option><option>douanier</option></select></td>
  <td>Laponie</td>
  <td><select name="ville"><option selected></option></select></td>
  <td></form>aucune action<br>possible</td>
 </tr>
 <tr><form action="modifiermembre.php" method="post">
  <td><input type="text" name="nom" value="baya" readonly="true"></td>
  <td><select name="grade"><option selected>CaC</option><option>visiteur</option><option>douanier</option></select></td>
  <td>Laponie</td>
  <td><select name="ville"><option selected></option></select></td>
  <td></form>aucune action<br>possible</td>
 </tr>
</table>



Ajouter un membre :<br><form action="nouveaumembre.php" method="post">
			<input type="text" name="nom"><br>
			<select name="grade">
			 <option>visiteur</option>
			 <option>douanier</option>
			</select><br>
			<select name="duche" Onchange="changeselect(this,'ville');">
				<option>Comté du Poitou</option>
				<option>Comté du Périgord Angoumois</option>
				<option>Duché de Touraine</option>
				<option>Comté du Limousin et de la Marche</option>
				<option>Duché du Bourbonnais Auvergne</option>
			</select><br>	
			<div id="ville"><select name="ville" Onchange="changeselect(this,ville);">
			 
			</select></div>
			<input type="submit" value="Ajouter un douanier">
		   </form>

et la fonction changeselect

Code : Tout sélectionner

function changeselect(select1,idbloc) {
	var index=select1.options.selectedIndex;
	index=select1.options[index].text;
	var text='Duche/Comté : <select name="'+idbloc+'">'+tableau[index]+'</select><br>';
	document.getElementById(idbloc).innerHTML=text;
}

Mon tableau doit avoir un problème dans sa définition, mais je ne vois pas lequel.

Ton code HTML n'est absolument pas conforme : on ne peut pas mettre une balise <form> (ou n'importe quelle autre balise en fait) entre un <tr> et un <td>. à la rigueur, tu pourrais mettre ton formulaire dans une cellule et à l'intérieur du formulaire un tableau imbriqué.

Commence par rendre ton code conforme et il y a des chances pour que ça fonctionne mieux.

J'ai fait la modification, mais ca ne marche toujours pas.

Tu as ça en ligne quelque part ? Parce que sans le code (modifié) ni la vision du résultat, difficile de te répondre.

Voici le code modifié

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<style type="text/css">
body {color:black;}
body,td,th {font-family: Garamond; font-size: 14px;	font-weight: bold;}
a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
a:hover {text-decoration: none; font-size: 14px;	font-style: italic;	color: #000000;}
a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;}
a { font-size: 14px; font-weight: bold;}
.bordure, .bordure th, .bordure td {border: 2px solid black;border-collapse:collapse;} 
.pasbordure, .pasbordure th, .pasbordure td{border:none}
.texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;	vertical-align: middle;}
 </style>
<script language="javascript" src="http://mmcca/alliance du centre/function.js"></script>
<script language='javascript'>var tableau=new Array();
tableau['Comté du Périgord Angoumois']='<option>Angoulême</option><option>Bergerac</option><option>Castillon</option><option>Périgueux</option><option>Sarlat</option>';tableau['Duché du Bourbonnais Auvergne']='<option>Aurillac</option><option>Bourbon</option><option>Clermont</option><option>Montbrisson</option><option>Montluçon</option><option>Montpensier</option><option>Moulin</option><option>Murat</option><option>Polignac</option><option>Thiers</option>';tableau['Comté du Limousin et de la Marche']='<option>Bourganeuf</option><option>Guéret</option><option>Limoges</option><option>Rochechouart</option><option>Tulle</option><option>Ventadour</option>';tableau['Duché de Touraine']='<option>Chinon</option><option>Loches</option><option>Tours</option><option>Vendome</option>';tableau['Comté du Poitou']='<option>La Rochelle</option><option>La Trémouille</option><option>Niort</option><option>Poitiers</option><option>Saintes</option><option>Thouars</option>';tableau[0]='a';</script>
<body background="http://mmcca/alliance du centre/fond.jpg" style=" background-position:center top; background-repeat:no-repeat " OnLoad="adjust(); ">
<div id="contener" style="overflow:auto; position:absolute; left:0px ; top:0px; width:790px; height:580px; z-index:10; padding-right: 10px; text-align: justify;"><div align="right"><a href="http://mmcca/alliance du centre/deconnexion.php">Se déconnecter</a></div>Profil de orgerix<table class="bordure">
 <tr>
  <th>Nom</th>
  <th>Grade</th>
  <th>Duché/Comté</th>
  <th>Ville</th>
  <th>Action</th>
 </tr>
 <tr>
  <td><form action="modifiermembre.php" method="post"><input type="text" name="nom" value="test" readonly="readonly"></td>
  <td><select name="grade"><option selected>CaC</option><option>visiteur</option><option>douanier</option></select></td>
  <td>Laponie</td>
  <td><select name="ville"><option selected></option></select></td>
  <td></form>aucune action<br>possible</td>
 </tr>
 <tr>
  <td><form action="modifiermembre.php" method="post"><input type="text" name="nom" value="baya" readonly="readonly"></td>
  <td><select name="grade"><option selected>CaC</option><option>visiteur</option><option>douanier</option></select></td>
  <td>Laponie</td>
  <td><select name="ville"><option selected></option></select></td>
  <td></form>aucune action<br>possible</td>
 </tr>
</table>



Ajouter un membre :<br><form action="nouveaumembre.php" method="post">
			<input type="text" name="nom"><br>
			<select name="grade">
			 <option>visiteur</option>
			 <option>douanier</option>
			</select><br>
			<select name="duche" Onchange="changeselect(this,'ville');">
				<option>Comté du Poitou</option>
				<option>Comté du Périgord Angoumois</option>
				<option>Duché de Touraine</option>
				<option>Comté du Limousin et de la Marche</option>
				<option>Duché du Bourbonnais Auvergne</option>
			</select><br>	
			<div id="ville"><select name="ville" Onchange="changeselect(this,ville);">
			<option></option>
			</select></div>
			<input type="submit" value="Ajouter un douanier">
		   </form>
</div>
</body>
</html>

Quand a l'execution, quand je change le premier select, le deuxième ne change pas et IE me donne :

ligne : 46
Erreur d'execution inconnue.

Ce que je ne comprend pas, c'est que dans ma page HTML, ca correspond à la fermeture du deuxième <tr> et dans ma page de script, à l'accolade fermente de la fonction.

Je travaille ca en local, mais je vais le mettre en ligne

EDIT :

http://antoine.souques.free.fr/Untitled-1.html

IL y a juste pas l'image de fond, mais c'est pas trop grave.

Pas mieux : Le formulaire est imbriqué à cheval sur plusieurs cellules : ce n'est pas plus conforme que la version précédente. Et pourquoi deux formulaires qui ont la même action dans chaque ligne au lieu d'un seul qui englobe tout le tableau ??

Schéma de ce que tu peux faire :

Code : Tout sélectionner

<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
/*<![CDATA[*/
    body {color:black;}
    body,td,th {font-family: Garamond; font-size: 14px;   font-weight: bold;}
    a:link {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
    a:visited {text-decoration: none; font-size: 14px; font-style: normal; color: #996600;}
    a:hover {text-decoration: none; font-size: 14px;   font-style: italic;   color: #000000;}
    a:active {text-decoration: none; font-size: 14px; font-style: normal; color: #663333;}
    a { font-size: 14px; font-weight: bold;}
    .bordure, .bordure th, .bordure td {border: 2px solid black;border-collapse:collapse;}
    .pasbordure, .pasbordure th, .pasbordure td{border:none}
    .texte {font-size: 14px; font-weight: bold; font-family: Garamond; text-align: center; line-height: normal;   vertical-align: middle;}
    /*]]>*/
    </style>
    <script language="javascript" src="http://mmcca/alliance%20du%20centre/function.js" type="text/javascript">
</script>
    <script language='javascript' type="text/javascript">
//<![CDATA[
    var tableau=new Array();
    tableau['Comté du Périgord Angoumois']='<option>Angoulème<\/option><option>Bergerac<\/option><option>Castillon<\/option><option>Périgueux<\/option><option>Sarlat<\/option>';
    tableau['Duché du Bourbonnais Auvergne']='<option>Aurillac<\/option><option>Bourbon<\/option><option>Clermont<\/option><option>Montbrisson<\/option><option>Montluçon<\/option><option>Montpensier<\/option><option>Moulin<\/option><option>Murat<\/option><option>Polignac<\/option><option>Thiers<\/option>';
    tableau['Comté du Limousin et de la Marche']='<option>Bourganeuf<\/option><option>Guéret<\/option><option>Limoges<\/option><option>Rochechouart<\/option><option>Tulle<\/option><option>Ventadour<\/option>';
    tableau['Duché de Touraine']='<option>Chinon<\/option><option>Loches<\/option><option>Tours<\/option><option>Vendome<\/option>';
    tableau['Comté du Poitou']='<option>La Rochelle<\/option><option>La Trémouille<\/option><option>Niort<\/option><option>Poitiers<\/option><option>Saintes<\/option><option>Thouars<\/option>';
    tableau[0]='a';
    //]]>
    </script>
  </head>
  <body background="http://mmcca/alliance%20du%20centre/fond.jpg" style=" background-position:center top; background-repeat:no-repeat" onload="adjust();">
    <div id="contener" style="overflow:auto; position:absolute; left:0px ; top:0px; width:790px; height:580px; z-index:10; padding-right: 10px; text-align: justify;">
      <div align="right">
        <a href="http://mmcca/alliance%20du%20centre/deconnexion.php">Se d&eacute;connecter</a>
      </div>Profil de orgerix
      <form action="modifiermembre.php" method="post">
        <table class="bordure">
          <tr>
            <th>Nom</th>
            <th>Grade</th>
            <th>Duch&eacute;/Comt&eacute;</th>
            <th>Ville</th>
            <th>Action</th>
          </tr>
          <tr>
            <td>
              <input type="text" name="nom" value="test" readonly="readonly" />
            </td>
            <td>
              <select name="grade">
                <option selected="selected">CaC</option>
                <option>visiteur</option>
                <option>douanier</option>
              </select>
            </td>
            <td>
              Laponie
            </td>
            <td>
              <select name="ville">
                <option>&nbsp;</option>
              </select>
            </td>
            <td>
              aucune action<br />
              possible
            </td>
          </tr>
          <tr>
            <td>
              <input type="text" name="nom" value="baya" readonly="readonly" />
            </td>
            <td>
              <select name="grade">
                <option selected="selected">CaC</option>
                <option>visiteur</option>
                <option>douanier</option>
              </select>
            </td>
            <td>
              Laponie
            </td>
            <td>
              <select name="ville">
                <option>&nbsp;</option>
              </select>
            </td>
            <td>
              aucune action<br />
              possible
            </td>
          </tr>
        </table>
      </form>
      Ajouter un membre :<br />
      <form action="nouveaumembre.php" method="post">
        <input type="text" name="nom" /><br />
        <select name="grade">
          <option>visiteur</option>
          <option>douanier</option>
        </select><br />
        <select name="duche" onchange="changeselect(this,'ville');">
          <option>Comt&eacute; du Poitou</option>
          <option>Comt&eacute; du P&eacute;rigord Angoumois</option>
          <option>Duch&eacute; de Touraine</option>
          <option>Comt&eacute; du Limousin et de la Marche</option>
          <option>Duch&eacute; du Bourbonnais Auvergne</option>
        </select><br />
        <div id="ville">
          <select name="ville" onchange="changeselect(this,ville);">
            <option>&nbsp;</option>
          </select>
        </div>
        <input type="submit" value="Ajouter un douanier" />
      </form>
    </div>
  </body>
</html>

Ceci dit, je te signale que le lien que tu as mis vers le JavaScript est mort, donc de toutes façons il ne peut rien se passer.

Sur la version en ligne, le lien est bon.

J'aimerai avoir un formulaire par ligne, parce que la j'ai un problème de champ de même nom et que je génère le formulaire dynamiquement.

Mais même en utilisant ton code, ca ne marche toujours pas.

Après quelques tests, c'est ce code qui pose problème

Code : Tout sélectionner

              <select name="ville"> 
                <option>&nbsp;</option> 
              </select>

EDIT : J'ai trouvé pourquoi ca ne marche pas. Mon div avait comme id le nom du select et donc ca faisait bugger le script.

Modération :
orgerix, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton

en haut à gauche de ce sujet.

Oups, un petit oublis, c'es fait.

Forum d'entraide PHPFrance

fonction js qui ne marche pas avec un tableau HTML

fonction js qui ne marche pas avec un tableau HTML