bonjour

j'essaie depuis quelques jours de faire un formulaire dans lequel un des choix se ferait en fonction de l'option sélectionnée dans un autre champ. Le tout sans avoir a changer de page. Après quelques recherches (et un peu d'aide) j'ai trouvé ceci :

http://www.siteduzero.com/tutoriel-3-4 [...] prequest.html

Seulement, j'ai essayé de comprendre le tuto , et j'avoue que si c'est bien plus clair qu'un ancien tuto vers lequel on m'avait dirigé et qui était très complexe, je n'en suis pourtant pas au point de réussir a faire fonctionner ma page... j'ai du faire une erreur quelque part mais ou, je ne vois pas.

Le problème est que je ne peux pas reproduire intégralement le code qui est donné en exemple : celui-ci se base sur un tableau, et ayant déjà une dizaine de tableaux nécessaires pour faire fonctionner mon site, j'essaie d'éviter d'en ajouter, afin de l'alléger au maximum. J'ai donc choisi, plutôt que la méthode post, la méthode get. J'ai donc tenté de prendre ce qui se rapportait a la méthode get dans le tuto, et de le coupler a ce qui se rapportait a la sélection d'une option de groupe. Ca ne marche pas. J'ai tenté de remettre l'alerte pour voir si l'action s'exécutait, mais sans le moindre succès. Il semblerait que le navigateur ne s'aperçoive même pas que je change de sélection.

Je mets mon code ici, si quelqu'un veut bien essayer de me dire ou ça cloche, je lui en serai infiniment reconnaissant

<script type="text/javascript">

<!--

function getXMLHttpRequest()

{

	var xhr = null;

	if(window.XMLHttpRequest || window.ActiveXObject)

	{

		if(window.ActiveXObject)

		{

			try

			{

				xhr = new ActiveXObject("Msxml2.XMLHTTP");

			}

			catch(e)

			{

				xhr = new ActiveXObject("Microsoft.XMLHTTP");

			}

		}

		else

		{

			xhr = new XMLHttpRequest();

		}

	}

	else

	{

		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");

		return null;

	}

 

	return xhr;

}



function selectEditor(oElem)

{

 

	var xhr = getXMLHttpRequest();

	var value =  oElem.options[oElem.selectedIndex].value;

	if(value != "none")

	{

		if(xhr && xhr.readyState != 0)

		{

			xhr.abort(); 

		} 

		xhr.onreadystatechange = function()

		{ 

			if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))

			{

				document.getElementById("loading").innerHTML = "";

				getData(xhr.responseXML);

			}

			else if(xhr.readyState == 2 || xhr.readyState == 3)

			{

				document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";

			}

		}

	}

	var Groupe_objets = encodeURIComponent(document.getElementById("groupe_objet").value);

	xhr.open("GET", "edit_objets.php?groupe_objet=" + groupe_objet + "", true);

	xhr.send(null);

}

function getData(sData)

{

	alert(sData);

}

//-->

</script>



<form action="admin_objets.php" method="post">

<p>objet : <input type="text" size="30" name="objet" value="<?php echo $objet; ?>" /></p>

<p>groupe : <select name="groupe_objet" onchange="selectEditor(this);">

	<option value="none"></option>

	<option value="1-artefacts">1-Artefacts</option>

	<option value="2-bidouilles">2-Bidouilles</option>

	<option value="3-chasse_et_pêche">3-Chasse et pêche</option>

	<option value="4-quêtes">4-Quêtes</option>

	<option value="5-équipement">5-Equipement</option>

	</select></p>



<?php

switch ($_GET['groupe_objet'])

{

	case "null":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option>séléctionnez un groupe</option>

	</select></p>

<?php

break;

	case "1-Aretfacts":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option value="1-Amélioration">1-Amélioration</option>

	<option value="2-Caractéristiques">2-Caractéristiques</option>

	<option value="3-Ressources">3-Ressources</option>

	<option value="4-Recherche">4-Recherche</option>

	</select></p>

<?php

break;

	case "2-Bidouilles":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option value="1-Outillage">1-Outillage</option>

	<option value="2-Chasse">2-Chasse</option>

	<option value="3-Cuisine">3-Cuisine</option>

	<option value="4-Fixation">4-Fixation</option>

	<option value="5-Fonderie">5-Fonderie</option>

	<option value="6-Matière-première">6-Matière-première</option>

	<option value="7-Mécanique">7-Mécanique</option>

	<option value="8-Pêche">8-Pêche</option>

	<option value="9-Pôterie">9-Pôterie</option>

	<option value="10-Santé">10-Santé</option>

	</select></p>

<?php

break;

	case "3-chasse_et_pêche":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option value="1-outils_de_chasse">1-Outils de chasse</option>

	<option value="2-outils_de_pêche">2-Outils de pêche</option>

	</select></p>

<?php

break;

	case "4-quêtes":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option value=""></option>

	<option value=""></option>

	</select></p>

<?php

break;

	case "5-équipement":

?>

<p>sous-groupe : <select name="sous-groupe_objet">

	<option value="1-armes">1-armes</option>

	<option value="2-vêtements">2-vêtements</option>

	</select></p>

<?php

break;

}

?>

    <input type="hidden" name="id_constructions" value="<?php echo $id_constructions; ?>" />

    <input type="submit" value="Envoyer" />

</p>

</form>

voila. J'ai juste viré les différentes divs autour du form, l'entête de la page, les balises body, html, enfin toute la fioriture qui n'entre pas en jeu dans le code necessaire pour faire le lien entre l'option choisie dans le premier "group" et le second.

Je pense que tu pars completement sur la mauvaise route, que vien faire de l'AJAX la dedant?

Exprime directement ce que tu veux faire, quel selection, doit changer quoi?

Di moi si je me trompe sur la compréhension de ce que tu désire.

En fonction du choix de l'utilisateur sur son objet, un deuxieme menu sur la spécificitée de l'action à faire s'affiche?

une simple fonction JS suffira sans surcharger ton pauvre serveur

Si c'est bien ce que tu veux faire je t'écrirais la fonction.

ce que je veux faire c'est en gros que sans changer de page, en sélectionnant une option de "groupe_objet", on aie une liste de choix différente dans "sous_groupe_objet". Tout simplement.

dans la façon de procéder,

tu garde ceci

<p>groupe : <select name="groupe_objet" onchange="selectEditor(this);">

	<option value="none"></option>

	<option value="artefacts">1-Artefacts</option>

	<option value="bidouilles">2-Bidouilles</option>

	<option value="chasse_et_pêche">3-Chasse et pêche</option>

	<option value="quetes">4-Quêtes</option>

	<option value="equipement">5-Equipement</option>

	</select></p>

ensuite tu déclare un div dont sa valeur changera

<div id='precision'></div>

Ensuite ton script Js A bien mettre apres

<script>
function selectEditor(valeur)
{
    if(valeur == "artefacts")
{

document.getElementById("precision").innerHTML ='<p>sous-groupe : <select name="sous-groupe_objet"><option value="1-Amélioration">1-Amélioration</option><option value="2-Caractéristiques">2-Caractéristiques</option><option value="3-Ressources">3-Ressources</option><option value="4-Recherche">4-Recherche</option></select></p>';

}

}
</Script>

Voila je n'es pas essayer(pas le temps dsl) mais ceci devrais fonctionner si ce n'est pas le cas il doit rester un petite erreur idiote.

j'ai fais que la premiere catégorie, fais un copier coller en changeant la valeur dans le if "artefacts" par celle de ton deuxieme élément
et changer ce qui se trouve entre "" du document.getElementById("loading").innerHTML par le code HTML à afficher
Surtout supprime tous les retours a la ligne dans le document.getElementById("loading").innerHTML sinon cela ne fonctionnera pas.

j'ai repérer en revanche plusieurs problemes dans ton script ce qui ne risquai donc pas de fonctionner:

les valeurs de tes éléments comportai des caracteres spéciaux (mal acceter en traitement)
mais surtout certain les nom dans ton case php ne correspondent pas à ceux du formulaire

1-Aretfacts et 1-artefacts

respect bien les majuscules-minuscules ainsi que de bien recopier les noms

merci pour ton aide, mais j'ai dû mal comprendre quelque chose, parce que ça ne marche toujours pas... J'ai pourtant bien revérifié qu'il n'y ait plus d'accents, de majuscules, de fautes de frappe, j'ai mis le script après, mais ça ne change rien. Le select "sous_groupe_objets" ne s'affiche toujours pas, et rien ne se produit quand je sélectionne une autre option dans "groupe_objets"

je mets ici le code que complet après modif :

<form action="admin_objets.php" method="post">
<p>objet : <input type="text" size="30" name="objet" value="<?php echo $objet; ?>" /></p>
<p>groupe : <select name="groupe_objet" onchange="selectEditor(this);">
	<option value="artefacts">1-Artefacts</option>
	<option value="bidouilles">2-Bidouilles</option>
	<option value="chasse_et_peche">3-Chasse et pêche</option>
	<option value="quetes">4-Quêtes</option>
	<option value="equipement">5-Equipement</option>
	</select></p>

<div id='precision'></div>

<p>image : <input type="text" size="30" name="image_objet" value="<?php echo $image_objet; ?>" /></p>
    <input type="hidden" name="id_objet" value="<?php echo $id_objet; ?>" />
    <input type="submit" value="Envoyer" />
</form>

<script type="text/javascript">
<!--
function selectEditor(valeur)
{
	if(valeur == artefacts)
	{
		document.getElementById("precision").innerHTML = = '<p>sous-groupe : <select name="sous_groupe_objet"><option value="amelioration">1-Amélioration</option><option value="caracteristiques">2-Caractéristiques</option><option value="ressources">3-Ressources</option><option value="recherche">4-Recherche</option></select></p>';
	}
	if(valeur == bidouilles)
	{
		document.getElementById("precision").innerHTML = = '<p>sous-groupe : <select name="sous_groupe_objet"><option value="outillage">1-Outillage</option><option value="chasse">2-Chasse</option><option value="cuisine">3-Cuisine</option><option value="fixation">4-Fixation</option><option value="fonderie">5-Fonderie</option><option value="matière-première">6-Matiere-premiere</option><option value="mecanique">7-Mécanique</option><option value="peche">8-Pêche</option><option value="poterie">9-Pôterie</option><option value="sante">10-Santé</option></select></p>';
	}
	if(valeur == chasse_et_peche)
	{
		document.getElementById("precision").innerHTML = = '<p>sous-groupe : <select name="sous_groupe_objet"><option value="outils_de_chasse">1-Outils de chasse</option><option value="outils_de_peche">2-Outils de pêche</option></select></p>';
	}
	if(valeur == quetes)
	{
		document.getElementById("precision").innerHTML = = '<p>sous-groupe : <select name="sous_groupe_objet"><option value=""></option>';
	}
	if(valeur == equipement)
	{
		document.getElementById("precision").innerHTML = = '<p>sous-groupe : <select name="sous_groupe_objet"><option value="armes">1-armes</option><option value="vetements">2-vêtements</option></select></p>';
	}
}
//-->
</Script>

dsl j'ai fais un faute de frappe ue je n'avais pas vu

document.getElementById("precision").innerHTML = =

Il ne doit y avoir que un seul égale

document.getElementById("precision").innerHTML = '<p>sous-groupe : <select name="sous-groupe_objet"><option value="1-Amélioration">1-Amélioration</option><option value="2-Caractéristiques">2-Caractéristiques</option><option value="3-Ressources">3-Ressources</option><option value="4-Recherche">4-Recherche</option></select></p>';

Metre deux égale, éxécute un comparaison entre deux valeurs donc pour ce qui est des IF c'est correct

La dans le cas on veut attribuer une valeur a notre champs innerHTML nous devons donc utiliser qu'un seul égale

non le if n'est meme pas correct il faut des quotes, sinon jamais ça marche:

if(valeur == "equipement") {

Faire parreil pour tous les autres (d'ailleurs un switch est plus approprié ici m'enfin.

et il traine encore des erreurs. genre valeure ne correspons pas à ce à quoi tu test.

Oui bonne remarque je les avais oublié
C'est vrais que j'aurais du faire un switch. faut m'excuser je suis fatigué

j'ai fait les deux modifs, mais sans plus de succès

Voila le code modifié et opérationel, je l'ai testé il fontionne

<form name='formu' action="admin_objets.php" method="post">
<p>objet : <input type="text" size="30" name="objet" value="<?php echo $objet; ?>" /></p>
<p>groupe : <select name="groupe_objet" onchange="selectEditor();">
	<option value="rien" >rien</option>
	<option value="artefacts" >1-Artefacts</option>
	<option value="bidouilles">2-Bidouilles</option>
	<option value="chasse_et_peche">3-Chasse et pêche</option>
	<option value="quetes">4-Quêtes</option>
	<option value="equipement">5-Equipement</option>
	</select></p>

<div id='precision'></div>

<p>image : <input type="text" size="30" name="image_objet" value="<?php echo $image_objet; ?>" /></p>
    <input type="hidden" name="id_objet" value="<?php echo $id_objet; ?>" />
    <input type="submit" value="Envoyer" />
</form>

<script type="text/javascript">
<!--
function selectEditor(valeur)
{

	valeur = document.formu.groupe_objet.value;

	if(valeur == "artefacts")
	{
		document.getElementById("precision").innerHTML =  '<p>sous-groupe : <select name="sous_groupe_objet"><option value="amelioration">1-Amélioration</option><option value="caracteristiques">2-Caractéristiques</option><option value="ressources">3-Ressources</option><option value="recherche">4-Recherche</option></select></p>';
	}
	else if(valeur == "bidouilles")
	{
		document.getElementById("precision").innerHTML =  '<p>sous-groupe : <select name="sous_groupe_objet"><option value="outillage">1-Outillage</option><option value="chasse">2-Chasse</option><option value="cuisine">3-Cuisine</option><option value="fixation">4-Fixation</option><option value="fonderie">5-Fonderie</option><option value="matière-première">6-Matiere-premiere</option><option value="mecanique">7-Mécanique</option><option value="peche">8-Pêche</option><option value="poterie">9-Pôterie</option><option value="sante">10-Santé</option></select></p>';
	}
	else if(valeur == "chasse_et_peche")
	{
		document.getElementById("precision").innerHTML =  '<p>sous-groupe : <select name="sous_groupe_objet"><option value="outils_de_chasse">1-Outils de chasse</option><option value="outils_de_peche">2-Outils de pêche</option></select></p>';
	}
	else if(valeur == "quetes")
	{
		document.getElementById("precision").innerHTML =  '<p>sous-groupe : <select name="sous_groupe_objet"><option value=""></option>';
	}
	else if(valeur == "equipement")
	{
		document.getElementById("precision").innerHTML =  '<p>sous-groupe : <select name="sous_groupe_objet"><option value="armes">1-armes</option><option value="vetements">2-vêtements</option></select></p>';
	}
}
//-->
</Script>

C'étais bien ce que je pensais l'utilisation de

onchange="selectEditor(this);"


avec le this pour retourner la valeur était pas approprié

je comprenais pas bien ce qu'il venait faire la pour tout dire, mais je l'avais récupéré du tuto.

Un grand merci a toi pour ton aide précieuse. Je bloquais sur cette simple fonctionnalité depuis maintenant deux semaines ! Je vais pouvoir en revenir au reste de mon site grâce a toi !

Merci mille fois !