champs lies a une liste deroulante

Petit nouveau ! | 9 Messages

22 sept. 2010, 18:13

Bonjour,

Mon problème est le suivant :

je veux afficher quelques champs d'un formulaire et ca dépend d'une valeur choisit a partir d'une valeur d'une liste déroulante . le problème que j'ai avec mon code actuel c'est que lorsque je choisis une valeur de la liste déroulante ca provoque l'actualisation de toute la page afin de perdre les valeurs remplis dans les champs prétendantes et envoi a la page suivante avant le submit , mon code est le suivant :

Code :

<form name="menuDeroulant" action='etape2.php' method='POST'>

<label class='classe_label'>Votre nom:</label><input type="text" value ="" name="nom" />*<br>
<label class='classe_label'>Votre prénom:</label> <input type="text" value ="" name="prenom" />*<br>
<label class='classe_label'>Téléphone:</label> <input type="text" value ="" name="telephone" />*<br>
<label class='classe_label'>Email:</label> <input type="text" value ="" name="email" />*<br>
<?php
$selected = 'selected="selected"';
(isset($_POST['liste'])) ? $liste = $_POST['liste'] : $liste = "";
?>
<label class='classe_label'>Catégorie de produit:</label>
<select name="liste" onchange='submit();'>
<option>Précisez la catégorie</option>
<option <?php if ($liste == "livre") echo $selected; ?>>livre</option >
<option <?php if ($liste == "magasin") echo $selected; ?>>magasin</option >
<option <?php if ($liste == "CD") echo $selected; ?>>CD</option >
</select>
<?php
if ($liste == "livre") {
?><br /><label class='classe_label'>DETAILS:</label>
<div id="livre">
<select name='type'>
<option>DETAILS</option>
<option <?php if ($marque == "type") echo $selected; ?>>type</option>
<option <?php if ($marque == "auteur") echo $selected; ?>>auteur</option>
</select>
</form>


et cette actualisation de toute la page a cause de la fonction
Code :

onchange='submit();'

Merci de m'aider j'ai pas de grandes connaissance ce qui concerne AJAX

Merci d'avance a vous tous

Mammouth du PHP | 661 Messages

22 sept. 2010, 18:57

à mon avis ajax, ne serait pas la meilleurs solution, elle serait bonne mais pas la "plus pratique"

Par contre, l'utilisation de javascript est obligatoire pour effectuer ce que tu souhaites sans rechargement de page !
Sinon, en conservant ce que tu as fait, il te suffit de mettre des données reçus via $_POST dans les champs de formulaires correspondants !

donc, pour aller au plus simple :

Solution PHP (tels quel)

Code : Tout sélectionner

<form name="menuDeroulant" action='etape2.php' method='POST'> <label class='classe_label'>Votre nom:</label><input type="text" value ="<?php if(isset($_POST['nom'])) echo $_POST['nom'] ; ?>" name="nom" />*<br> <label class='classe_label'>Votre prénom:</label> <input type="text" value ="<?php if(isset($_POST['prenom'])) echo $_POST['prenom'] ; ?>" name="prenom" />*<br> <... ...
Javascript :
le principe serait d'afficher avec un attribut CSS display:none et l'attribut html disable=true tous les cas de figures possible avec un moyen de les retrouver par groupes facilement (une classe commune, tous dans une même div, ...)
Lors de la sélection du choix effectué depuis la liste déroulante, tu lance une fonction JS qui va afficher les éléments correspondant et les activer !

exemple :

Code : Tout sélectionner

<script type="text/javascript"> var maFunction = function(select){ var val = select.options[select.selectedIndex].value document.getElementById(val).style.display = "block" ; } </script> <select name="liste" onchange='maFunction(this);'> <option>Précisez la catégorie</option> <option <?php if ($liste == "livre") echo $selected; ?>>livre</option > <option <?php if ($liste == "magasin") echo $selected; ?>>magasin</option > <option <?php if ($liste == "CD") echo $selected; ?>>CD</option > </select> <div id="livre" style="display:none"> <input ... /> <!-- autres parametres du formulaire liés au choix "livre" --> </div> <div id="magasin" style="display:none"> <input ... /> <!-- autres paramètres du formulaire liés au choix "magasin" --> </div> ...


Sinon, en ajax, lors de changement de choix dans la liste déroulante, tu récupère la valeur (comme ci-dessus) puis tu effectue une requête sur une autre page qui va te retourner le morceau de formulaire à ajouter à ton formulaire actuel, et tu le place dans une div situé dans ton formulaire !...
Mais dans ce cas là, je te laisserais déjà faire connaissance avec l'ajax pour bien appréhender cette étape ^^

@++

Petit nouveau ! | 9 Messages

22 sept. 2010, 21:08

D'abord merci pour votre reponse mais la solution que vous m'a donnee en javascript ca marche pas si on choisit livre il donne les champs lie a livre mais si on choisis apres magasin il ajoute les champs lie a magasin on obtient les champs liee au livre et au magasin en meme temps

la seule solution c est AJAX s'il vous plait si vous avez un exemple merci de me le donner c'est ters urgent

Merci beaucoup

Mammouth du PHP | 661 Messages

22 sept. 2010, 21:27

Heuu ... avant de dire "ça marche pas" ... demandez des explications !... par ce que ça marche, mais ce n'est pas "fini" !... :D Si vous souhaitez une solution "clé en main" il y a le forum "offre d'emploi et stage" qui est dédié à ça ! mais le reste du forum est dédié à l'apprentissage, ce qui veux dire que ceux qui savent aident ceux qui ne savent pas mais ne le font pas à leurs place !... (en tout cas pour ma part ^^)

Donc, ce qu'il faut c'est que sur la fonction javascript, il y ai un moyens pour refermer (et désactiver) les champs qui ne sont pas utiles.
Il faut donc récupérer toutes les divs que l'on peux fermer dans un tableau et les fermer !... ensuite, il suffit d'ouvrir celle que l'on souhaite, et le tour est joué !
Avec une Bonne lib, on utiliserais une classe, sinon, on pourrait avoir un tableau qui contient déjà toutes les id à fermer :

[javascript]
var list = ["livre", "magasin"]; // y ajouter les autres ids !
var maFunction = function(select){
for(var i = 0; i< list.length; i++)
document.getElementById(list).style.display = "none";

var val = select.options[select.selectedIndex].value ;
document.getElementById(val).style.display = "block" ;
}
[/javascript]

Bon, au final, j'ai tout fais :s ... il reste tout de même à vous de faire les désactivations des éléments masqués et les remises à zéro des données, sinon elle vont être postées !

BonneSoirée ;)

Petit nouveau ! | 9 Messages

22 sept. 2010, 21:52

merci ca marche tres bien mais le probleme que j'ai remarque que ca marche pas sur IE6
vous savez pas pourquoi ? :)