Bonjour le monde
J'ai malheureusement perdu mon ancien compte bêtement....
Je viens vers vous pas pour un problème, car mon code fonctionne mais plus pour voir avec vous comment optimiser mon compte.
Mon cas : J'ai un formulaire dynamique, selon la sélectionne de certain champ j'en affiche de nouveau. Si l'utilisateur change de choix, je fais disparaître mes nouveaux champs.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 <div class="col-lg-6"> <div class="form-group"> <label>Type de demande : </label> <select name="type de demande" class="demande-info" > <option value="" selected="selected"></option> <optgroup label="General"> <option value="4">Account / License</option> <option value="38">Feature request</option> <option value="37">Partnership</option> <option value="2">Pre-sale</option> <option value="3">Product information</option> <option value="1">Technical support</option> </optgroup> </select> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="ct_product_id">Product :</label> <select class="type-produit" id="ct_product_id"> <option></option> <option value="1454">Produit 1</option> <option value="1466">Produit 2</option> <option value="1234">Produit 3</option> <option value="1322">Produit 4.1</option> <option value="1461">Produit 4.2</option> <option value="1458">Produit 4.3</option> </select> </div> </div> <div class="col-lg-6"> <div class="form-group" id="numberProduct"> <label for="ct_product_id">Number of product :</label> <select class="" id="ct_product_number"> <option value="0">0</option> <option value="1">0 - 500</option> <option value="2">500 - 2 000</option> <option value="3">2 000 - 5 000</option> <option value="3">+ 10 000</option> </select> </div> </div> <div class="col-lg-6"> <div class="form-group" id="selectLetter"> <label for="ct_product_id">Select a letter :</label> <select class="form-control input-lg" id="ct_letter"> <option value="1"></option> <option value="2">aaa</option> <option value="3">bbb</option> <option value="3">ccc</option> <option value="3">ddd</option> <option value="3">eee</option> <option value="3">fff</option> </select> </div> </div>
Un peu de CSS pour masquer les champs que je ne souhaite pas voir au debut
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 .contact-us #numberProduct{ display: none; //opacity: 0; } .contact-us #selectLetter{ display: none; //opacity: 0; }
J'utilise donc du Jquery. J'ecoute mes 2 premiers champs "Type de demande" et "Produit".
Si l'utilisateur selectionne "Pre-sale" "Product information" dans type de demande et un produit 4.dans "Product", j'affiche les autre champs.
Si l'utilisateur désélectionne les précédent champs, j'annule l'affichage des autres champs
Voilà mon Jquerry
Je duplique donc mon ecoute sur les 2 champs mais avec les vérifications qui vont avec :/
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 (function ($) { $(".demande-info").change(function(){ var demande_info = $(".demande-info").val(); var type_produit = $(".type-produit").val(); // Verification selon la valeur des champs if((demande_info == "3" || demande_info == "2") && (type_produit =="1322" || type_produit =="1461" || type_produit =="1458")){ $("#numberProduct").fadeIn(); $("#selectLetter").fadeIn(); }else{ $("#numberProduct").fadeOut(); $("#selectLetter").fadeOut(); } }); $(".type-produit").change(function(){ var demande_info = $(".demande-info").val(); var type_produit = $(".type-produit").val(); // Verification selon la valeur des champs if((demande_info == "3" || demande_info == "2") && (type_produit =="1322" || type_produit =="1461" || type_produit =="1458")){ $("#numberProduct").fadeIn(); $("#selectLetter").fadeIn(); }else{ $("#numberProduct").fadeOut(); $("#selectLetter").fadeOut(); } });
Pas très optimisé donc.
Avez-vous une idée de comment mieux faire, je bloque un peu.
Merci à vous
Partager