Bonjour !

Voilà maintenant plusieurs heures que je croche sur le problème suivant :
Un formulaire demande à l'utilisateur de sélectionner un menu dans une liste déroulante puis un sous-menu relatif au menu sélectionné. Cette deuxième liste est générée par AJAX.

Jusque là tout se passe bien. Mais lorsque j'envoie mon formulaire, Firefox ne prend pas en compte la valeur de la deuxième liste, alors que IE la récupère correctement.

Voici mon code JavaScript :

// Fonction de génération de liste déroulante (en fonction d'une première liste)
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
 * Fonction privée qui va créer un objet XHR.
 * Cette fonction initialisera la valeur dans la variable globale définie
 * ci-dessus.
 */
function creerRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour  */
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
/**
 * Fonction privée qui va mettre à jour l'affichage de la page.
 */
function actualiserSmenu()
{
    var listSmenu = requete.responseText;
    var blocListe = document.getElementById('listSmenu');
    blocListe.innerHTML = listSmenu;
	blocListe.style.display = "inline";
}

/**
 * Fonction publique appelée par la page affichée.
 * Cette fonction va initialiser la création de l'objet XHR puis appeler
 * le code serveur afin de récupérer les données à modifier dans la page.
 */
function getSmenu(id)
{
    /* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
    if(id == 'vide')
    {
        document.getElementById('listSmenu').innerHTML = '';
    }
    else
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var blocListe = document.getElementById('listSmenu');
        blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
        /* On crée l'objet XHR */
        creerRequete();
        /* Définition du fichier de traitement */
        var url = 'pages-ajax.php?menuSmenu='+ id;
        /* Envoi de la requête à la page de traitement */
        requete.open('GET', url, true);
		requete.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
        requete.onreadystatechange = function()
        {
            /* Lorsque l'état est à 4 */
            if(requete.readyState == 4)
            {
                /* Si on a un statut à 200 */
                if(requete.status == 200)
                {
                    /* Mise à jour de l'affichage, on appelle la fonction apropriée */
                    actualiserSmenu();
                }
            }
        };
        requete.send(null);
    }
}

Mon formulaire :

<table class="noBorder">
	<form name="pages" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
		<tr>
			<td colspan="2">Menu : <select name="menuSmenu" onChange="getSmenu(this.value);">
				<option value="vide">&lt;- Menu -&gt;</option>
				<?php
				// Récupération des menus
				for($i = 0; $i < 5; $i++)
				{
					echo "<option value=\"".$i."\"";
					if($modif && ($i == $menuSmenu)) echo " selected";
					echo ">";
					switch($i)
					{
						case 0: echo "Accueil"; break;
						case 1: echo "Services"; break;
						case 2: echo "R&eacute;f&eacute;rences"; break;
						case 3: echo "&Eacute;quipe"; break;
						case 4: echo "Contact"; break;
					}
					echo "</option>";
				}
				?>
			</select> <div style="display:none;" id="listSmenu"><select name="smenuID"></select></div></td>
		</tr>
		<tr>
			<td colspan="2">Contennu :<br />
				<textarea name="contenuPage"><?php if($modif) echo $contenuPage; ?></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2" class="center">
				<input type="submit" name="valider" value="<?php if($modif) echo "Modifier"; else echo "Ajouter"; ?>" />
			</td>
		</tr>
	</form>
</table>

Et finalement mon fichier ajax :

$menuSmenu = htmlentities($_GET['menuSmenu'], ENT_QUOTES);
if($menuSmenu == "0") echo "";
elseif($menuSmenu == "4") echo "";
else
{
	// Récupération des sous-menus
	$resultSm = mysql_query("SELECT * FROM smenus WHERE menuSmenu=\"".$menuSmenu."\" ORDER BY ordreSmenu");
	echo "<select name=\"smenuID\"><option value=\"vide\">&lt;- Sous-menu -&gt;</option>";
	while($rowSm = mysql_fetch_array($resultSm))
	{
		echo "<option value=\"".$rowSm['smenuID']."\"";
		if($modif && ($rowSm['smenuID'] == $smenuID)) echo " selected";
		echo ">";
		if($rowSm['niveauSmenu'] == 1) echo "&gt;";
		echo $rowSm['titreSmenu']."</option>";
	}
	echo "</select>";
}

Petite précision, le traitement du formulaire se fait sur la même page que celle ou il est affiché.

D'avance merci !

Tayger

un lien vers une page de test?(j'aimerais bien t'aider mais ma fainéantise m'en empêchera si tu ne mets pas ta apge en ligne pour qu'on voit le code généré )

Voilà, tu pourras voir ça ici :
http://www.conceptinno.ch/test/pages.php

Normalement, une fois le formulaire envoyé, les valeurs des 2 listes devrait être affichée. Ce qui n'est pas le cas pour la deuxième...

Bizarre. On peut voir la vrai page pages.php ? (Avec la réception du post)

On dirait un soucis avec la balise <form mais je voit pas quoi :/

Pour la récupération du POST, j'ai juste ce bout de code :

// On test si le formulaire a été envoyé
if(isset($_POST['valider']))
{
	// Récupération des variables
	$menuSmenu = htmlentities($_POST['menuSmenu'], ENT_QUOTES);
	$smenuID = htmlentities($_POST['smenuID'], ENT_QUOTES);
...
}
else
{
// Formulaire
}

Après, il y a insertion / modification dans la base de données.

Ce qui me perturbe le plus, c'est que IE récupère correctement la valeur de mon 2ème select.

J'utilise Firebug, mais aucune erreur n'apparaît. Cependant, si j'affiche le code source de ma page, le 2ème select n'apparaît pas dans le code.