11548 sujets

JavaScript, DOM et API Web HTML5

Util. une opt slctée ds un form cm cndtion pr les choix d'1 2nd form.

a écrit :
désolé pour le titre... Je le refais en entier :

Utiliser une option sélectionnée dans un formulaire (de type group) comme condition pour les choix d'un second forumlaire (de type group aussi).

En fait c'est pas deux formulaires, c'est un seul, mais form ca prend moins de place que group pis c'est plus clair

Donc voila mon message :


bonjour

j'ai un petit souci avec un formulaire a choix multiples pour lequel il me manque une fonction que je ne parviens pas a trouver.

J'ai besoin de créer un formulaire dans lequel, selon le choix sélectionné dans le premier "group", le choix inclus dans le second "group" change.

J'ai donc réalisé mon code comme ceci :


<form action="formulaire.php" method="post">
<p>groupe : <select name="groupe">
	<option value="option1">option1</option>
	<option value="option2">option2</option>
	</select></p>
<?php
switch ($_POST['groupe'])
{
	case "option1":
?>
<p>sous-groupe : <select name="sous-groupe">
	<option value="option1-1">option1-1</option>
	<option value="option1-2">option1-2</option>
	</select></p>
<?php
break;
	case "option2":
?>
<p>sous-groupe : <select name="sous-groupe">
	<option value="option2-1">option2-1</option>
	<option value="option2-2">option2-2</option>
	</select></p>
<?php
break;
}
?>
</form>


problème : ca ne m'affiche même pas le second "group".
Je pense que le probleme vient du "switch ($_POST['groupe'])", dans lequel je devrais remplacer $_POST par autre chose, puisque je ne poste pas mon formulaire pour accéder a la seconde option... Il me faudrait donc une autre fonction, visant a indiquer que la valeur doit être simplement sélectionnée, et non récupérée dans la barre d'adresse, ou postée. Seulement je n'ai aucune idée de quelle fonction utiliser. On m'a suggéré d'utiliser plutôt le langage javascript, mais je n'y connais rien, et le seul tuto sur le sujet que j'aie pu trouver (http://toutjavascript.com/savoir/xmlht [...] p3#section_05) me parait très hermétique, et je n'y ai rien compris...

Quelqu'un saurait-il m'aider ?
Modifié par beren57 (12 Dec 2008 - 18:25)
wow... t'as perdu tes voyelles ? Smiley cligne

Pour te répondre rapidement, ce que tu veux faire n'est possible en php que si on renvoie le résultat du premier formulaire au serveur (validation).

La raison est que php est un langage qui fonctionne côté SERVEUR. Or, quand on fais un choix dans un formulaire, tant qu'on a pas renvoyé la page, en cliquant sur un bouton, par exemple, on est côté client (le navigatuer). Le serveur n'a aucune idée de ce que l'on a rempli/cliqué, et donc ne fait rien, puisqu'on ne lui demande rien.

A l'inverse, javascript est un langage qui tourne sur le client, le navigateur de ton visiteur.

Donc la solution à ton problème, est soit :

* le faire en deux temps : d'abord on remplit un formulaire, on valide, ensuite on remplit le second

* sans rafraichir la page, c'est du javascript. Je dirais même de l'AJAX avec XMLHttpRequest

Mais là ça sort de mes compétences et je suis peut-être en train de te dire une grosse bêtise Smiley rolleyes
merci pour ta réponse. J'avais effectivement compris que je pouvais toujours courir pour fair ca avec le php. Pour ca que je posais la question dans la partie java. On m'avait vaguement parlé de XLMHblabla, mais en m'envoyant vers un tuto auquel je n'avais strictement rien compris. Par contre tout ce que j'ai pu apprendre de la prog c'etait sur le site du zéro, donc si il y a ce qui faut (et que j'avais pas vu) c'est génial.

Merci a toi Smiley cligne

et euuuh... Concernant le titre... Disons qu'il prenait trop de place par rapport a la taille maximum autorisée pour un titre donc il a fallu que je fasse des coupes Smiley lol
j'ai essayé de comprendre le tuto du site des zéros, j'avoue que j'ai un peu mieux compris qu'avec celui que j'avais, mais 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.

Je mets mon code ici, si quelqu'un veut bien essayer de me dire ou ca 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.
Modifié par beren57 (13 Dec 2008 - 21:29)
Sujet clos
Aller à