formulaire "dynamique"

Eléphanteau du PHP | 16 Messages

23 nov. 2016, 13:54

Bonjour je suis débutant en php et j'aimerais crée un formulaire avec des inputs qui change par rapport a ce que l'utilisateur choisis et je ne sais quoi chercher.
En gros mon utilisateur cree une tache et par rapport au type de tache choisis les attr1,2,3 de ma table task change de valeur et de nom.

Code : Tout sélectionner

<?php if(isset($_POST['submit'])){ require_once(ROOT . '/check_form/check_task.php'); } // var_dump(get_user_info($_SESSION['user_id'])); $data_brand = get_brand_info(); $data = get_user_info($_SESSION['user_id']); $vendeur = $data['username']; $query = "SELECT * FROM client WHERE vendeur='$vendeur'"; $result = mysqli_query($connection , $query); if(is_admin(get_user_info($_SESSION['user_id']))){ } ?> <script type="text/javascript"> $(document).ready(function() { $('select').material_select(); }); </script> <form method="POST" action="index.php?page=create_task"> <div class="row"> <div class="col s2"> <label for="username">Nom</label> <input disabled type="text" name="username" value="<?php echo($data['username']); ?>" /> </div> </div> <div class="row"> <div class="col s3"> <label for="task_type">Votre type de tache</label> <select name="task_type"> <option value="passed_call">Passer un appel</option> <option value="sold_product">Fait une vente</option> <option value="add_client">Ajouter un client</option> <option value="modify_client">Modifier un client</option> <option value="take_client">Pris rendez-vous</option> </select> </div> </div> <div class="row"> <div class="col s2"> <label for="client_username">Nom du client</label> <select name="client_username"> <?php while ($datacli = mysqli_fetch_array($result)){ $client_name = $datacli['nom_shop']; $client_id = $datacli['id_client']; echo "<option value='$client_id'>$client_name</option>"; } ?> </select> </div> </div> <div class="row hidden"> <div class="col s2"> <label for="brand">Marque</label> <select name="brand"> <?php for ($i = 0 ; $i < 4 ; $i++){ $brand_name = $data_brand[$i]['brand_name']; echo "<option value='$brand_name'>$brand_name</option>"; } ?> </select> </div> <div class="col s2"> <label for="quantity">Quantité</label> <input type="text" name="quantity" /> </div> <div class="col s2"> <label for="price">Prix</label> <input type="text" name="price" /> </div> </div> <div class="row"> <div class="col s2"> <label for="attr1">Attribut 1</label> <input type="text" name="attr1" /> </div> <div class="col s2"> <label for="attr2">Attribut 2</label> <input type="text" name="attr2" /> </div> <div class="col s2"> <label for="attr3">Attribut 3</label> <input type="text" name="attr3" /> </div> </div> <div class="row"> <div class="col s2"> <label for="com">Commentaires</label> <textarea id="com" class="materialize-textarea" name="com"></textarea> </div> </div> <a class="waves-effect waves-light btn"><input type="submit" value="Ajouter tache" name="submit"></a> </form>
http://imgur.com/a/DIspn

On voit bien que le type par defaut est "passer un appel" et jaimerais que mes valeurs attr1 attr 2 attr3 changent. De meme pour marque, prix et quantité qui remplacent attr1 , 2 ,3 si l'utilisateur choisis "a fait une vente" comme task_type
Merci de bien vouloir m'aider

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

23 nov. 2016, 14:36

salut,

tu peux adapter ceci faq-tutoriels/listes-liees-avec-html-ja ... 55580.html

il va te falloir ajouter un peu de javascript ;)


@+
Il en faut peu pour être heureux ......

Mammouth du PHP | 881 Messages

27 nov. 2016, 04:47

Rappelle-toi:
- le PHP travaille du côté serveur. C'est-à-dire qu'une fois qu'il a envoyé sa page, PHP n'agit plus, n'écoute pas les actions de l'usager sur son fureteur.
- le javascript travaille du côté client. C'est lui qui écoute les modifications apportées par le visteur.

- le AJAX peut agir comme interprète et passer aller-retour entre client et serveur.

Pour ma part, j'ai opté pour un iframe fantôme auquel j'envoie des commandes PHP et dont les résultats sont placés sur la fenêtre du fureteur par javascript.
Soyez artisans de paix

Eléphanteau du PHP | 16 Messages

30 nov. 2016, 15:13

Ok pas de problème merci a vous!

Eléphanteau du PHP | 16 Messages

01 déc. 2016, 18:29

Malheureusement je n'arrive pas tres bien a modifier comprendre le tutorial proposé par moogli...
voici mon code :
je reprend la function

Code : Tout sélectionner

function Affiche_liste(id_ensemble_select,id_select) { // Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple) var id_ensemble_select = document.getElementById(id_ensemble_select); // Sélection de la sélection liée var id_select = document.getElementById(id_select); if(id_ensemble_select) { //Initialisation d'une variable pour contenir un tableau. var tab = new Array(); // Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau tab = id_ensemble_select.getElementsByTagName('select'); var tablength = tab.length; // Liste les éléments du tableau for (i=0; i < tablength; i++) { // Met les selects en disable = true et les cache avec style.display = 'none' tab[i].disabled = true; if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien } // Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline' if(id_select) { id_select.disabled = false; id_select.style.display = 'inline'; } } }
puis je modifie mes select par rapport a la function :

Code : Tout sélectionner

<label for="task_type">Votre type de tache</label> <select name="task_type"> <option value="passed_call" class="categorie" onclick = "Affiche_liste(this.className,this.value)">Passer un appel</option> <option value="sold_product" class="categorie" onclick = "Affiche_liste(this.className,this.value)">Fait une vente</option> <option value="add_client" class="categorie" onclick = "Affiche_liste(this.className,this.value)">Ajouter un client</option> <option value="modify_client" class="categorie" onclick = "Affiche_liste(this.className,this.value)">Modifier un client</option> <option value="take_client" class="categorie" onclick = "Affiche_liste(this.className,this.value)">Pris rendez-vous</option> </select> </div> <p id = "categorie"> <select name = "selection" id = "passed_call" style= "display:inline" disabled="disabled"> <option value = "">«Choisissez»</option> <option value = "cadet1">Cadet 1</option> <option value = "cadet2">Cadet 2</option> </select> </p>

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

06 déc. 2016, 09:13

salut,

la fonction utilise document.getElementById la patie en gras n'est pas anodine.
ton premier select n'a pas d'id du coup le navigateur trouve rien dans le dom et le if à la 9ème ligne ligne de fonction fait qu'il n'y a pas d'erreur.
Pour deboguer le javascript utilise les outils developper de ton navigateur préféré (chrome, firefox, il parait que même IE11 et Edge ont cette possibilité mais je n'ai pas testé). Utilise la touche F12 pour accéder à l'outil.

Essai de regarder des tutos sur le javascript "natif" c'est toujours très très pratique ;)

@+
Il en faut peu pour être heureux ......