Display block ook na versturen form
ik heb een formulier gemaakt in samenwerking met JavaScript, bedoeling is dat zodra men op "nee" klikt er vervolgens een serie andere dropdown menu's tevoorschijn komen.
Okay, dit werkt allemaal.
Het volgende probleem is dat zodra men op opslaan klikt, de serie dropdown menu's net zo hard weer verdwijnen. Ja, de gegevens zijn opgeslagen in MySQL, maar de eigenaren van een bepaald profiel zijn natuurlijk verward. Is het nu wel opgeslagen of niet?
Hoe kan ik er voor zorgen, dat de dropdown menu's die tevoorschijn komen, na het selecteren van een value in een andere dropdown menu niet verdwijnen na het opslaan van de gegevens?
Dit is hoe de formulieren samenwerken met de JavaScript op één pagina:
Code (php)
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<label>Wilt u aanvragen van alle auto merken ontvangen?</label>
<select name="allemerken" id="allemerken" class="form-control input-lg">
<option value="0"<?php if($user->allemerken == 0){ echo " selected=selected"; } ?>>Nee</option>
<option value="1"<?php if($user->allemerken == 1){ echo " selected=selected"; } ?>>Ja</option>
</select>
<script>
var ddl = document.getElementById("allemerken");
ddl.onchange=newCustomerType;
function newCustomerType()
{
var ddl = document.getElementById("allemerken");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "1")
{ document.getElementById("merkendropdowns").style.display = "none";
}
else
{
document.getElementById("merkendropdowns").style.display = "block";
}
} </script>
<div id="merkendropdowns" style="display:none;"><label for="Merk1">Selecteer een automerk</label>
<select name="Merk1" id="Merk1" class="form-control input-lg">
<option value="">Selecteer een automerk</option>
<option value="ABARTH">Abarth</option>
<option value="ALFA ROMEO">Alfa Romeo</option>
<option value="ASTON MARTIN">Astong Martin</option>
<option value="AUDI">Audi</option>
<option value="BENTLEY">Bentley</option>
<option value="BMW">BMW</option>
<option value="BUGATTI">Bugatti</option>
<option value="CADILLAC">Cadillac</option>
<option value="CHEVROLET">Chevrolet</option>
<option value="CHRYSLER">Chrysler</option>
<option value="CITROEN">Citron</option>
<option value="DACIA">Dacia</option>
<option value="DAEWOO">Daewoo</option>
<option value="DAIHATSU">Daihatsu</option>
<option value="DODGE">Dodge</option>
<option value="DONKERVOORT">Donkervoort</option>
<option value="FERRARI">Ferrari</option>
<option value="FIAT">Fiat</option>
<option value="FORD">Ford</option>
<option value="FISKER">Fisker</option>
<option value="HONDA">Honda</option>
<option value="HUMMER">Hummer</option>
<option value="HYUNDAI">Hyundai</option>
<option value="INFINITI">Infiniti</option>
<option value="JAGUAR">Jaguar</option>
<option value="JEEP">Jeep</option>
<option value="KIA">Kia</option>
<option value="KTM">KTM</option>
<option value="LADA">Lada</option>
<option value="LAMBORGHINI">Lamborghini</option>
<option value="LANCIA">Lancia</option>
<option value="LAND ROVER">Land Rover</option>
<option value="LANDWIND">Landwind</option>
<option value="LEXUS">Lexus</option>
<option value="LOTUS">Lotus</option>
<option value="MASERATI">Maserati</option>
<option value="MAZDA">Mazda</option>
<option value="MERCEDES">Mercedes-Benz</option>
<option value="MG">MG</option>
<option value="MINI">Mini</option>
<option value="MITSUBISHI">Mitsubishi</option>
<option value="MCLAREN">McLaren</option>
<option value="NISSAN">Nissan</option>
<option value="OPEL">Opel</option>
<option value="PEUGEOT">Peugeot</option>
<option value="PORSCHE">Porsche</option>
<option value="QUROS">Quros</option>
<option value="RENAULT">Renault</option>
<option value="ROLLS-ROYCE">Rolls-Royce</option>
<option value="ROVER">Rover</option>
<option value="SAAB">Saab</option>
<option value="SEAT">Seat</option>
<option value="SKODA">Skoda</option>
<option value="SMART">Smart</option>
<option value="SSANGYONG">SsangYong</option>
<option value="SUBARU">Subaru</option>
<option value="SUZUKI">Suzuki</option>
<option value="SPYKER">Spyker</option>
<option value="TOYOTA">Toyota</option>
<option value="TESLA">Tesla</option>
<option value="THINK">Think</option>
<option value="VOLKSWAGEN">Volkswagen</option>
<option value="VOLVO">Volvo</option>
<option value="WIESMANN">Wiesmann</option>
</select>
<select name="allemerken" id="allemerken" class="form-control input-lg">
<option value="0"<?php if($user->allemerken == 0){ echo " selected=selected"; } ?>>Nee</option>
<option value="1"<?php if($user->allemerken == 1){ echo " selected=selected"; } ?>>Ja</option>
</select>
<script>
var ddl = document.getElementById("allemerken");
ddl.onchange=newCustomerType;
function newCustomerType()
{
var ddl = document.getElementById("allemerken");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "1")
{ document.getElementById("merkendropdowns").style.display = "none";
}
else
{
document.getElementById("merkendropdowns").style.display = "block";
}
} </script>
<div id="merkendropdowns" style="display:none;"><label for="Merk1">Selecteer een automerk</label>
<select name="Merk1" id="Merk1" class="form-control input-lg">
<option value="">Selecteer een automerk</option>
<option value="ABARTH">Abarth</option>
<option value="ALFA ROMEO">Alfa Romeo</option>
<option value="ASTON MARTIN">Astong Martin</option>
<option value="AUDI">Audi</option>
<option value="BENTLEY">Bentley</option>
<option value="BMW">BMW</option>
<option value="BUGATTI">Bugatti</option>
<option value="CADILLAC">Cadillac</option>
<option value="CHEVROLET">Chevrolet</option>
<option value="CHRYSLER">Chrysler</option>
<option value="CITROEN">Citron</option>
<option value="DACIA">Dacia</option>
<option value="DAEWOO">Daewoo</option>
<option value="DAIHATSU">Daihatsu</option>
<option value="DODGE">Dodge</option>
<option value="DONKERVOORT">Donkervoort</option>
<option value="FERRARI">Ferrari</option>
<option value="FIAT">Fiat</option>
<option value="FORD">Ford</option>
<option value="FISKER">Fisker</option>
<option value="HONDA">Honda</option>
<option value="HUMMER">Hummer</option>
<option value="HYUNDAI">Hyundai</option>
<option value="INFINITI">Infiniti</option>
<option value="JAGUAR">Jaguar</option>
<option value="JEEP">Jeep</option>
<option value="KIA">Kia</option>
<option value="KTM">KTM</option>
<option value="LADA">Lada</option>
<option value="LAMBORGHINI">Lamborghini</option>
<option value="LANCIA">Lancia</option>
<option value="LAND ROVER">Land Rover</option>
<option value="LANDWIND">Landwind</option>
<option value="LEXUS">Lexus</option>
<option value="LOTUS">Lotus</option>
<option value="MASERATI">Maserati</option>
<option value="MAZDA">Mazda</option>
<option value="MERCEDES">Mercedes-Benz</option>
<option value="MG">MG</option>
<option value="MINI">Mini</option>
<option value="MITSUBISHI">Mitsubishi</option>
<option value="MCLAREN">McLaren</option>
<option value="NISSAN">Nissan</option>
<option value="OPEL">Opel</option>
<option value="PEUGEOT">Peugeot</option>
<option value="PORSCHE">Porsche</option>
<option value="QUROS">Quros</option>
<option value="RENAULT">Renault</option>
<option value="ROLLS-ROYCE">Rolls-Royce</option>
<option value="ROVER">Rover</option>
<option value="SAAB">Saab</option>
<option value="SEAT">Seat</option>
<option value="SKODA">Skoda</option>
<option value="SMART">Smart</option>
<option value="SSANGYONG">SsangYong</option>
<option value="SUBARU">Subaru</option>
<option value="SUZUKI">Suzuki</option>
<option value="SPYKER">Spyker</option>
<option value="TOYOTA">Toyota</option>
<option value="TESLA">Tesla</option>
<option value="THINK">Think</option>
<option value="VOLKSWAGEN">Volkswagen</option>
<option value="VOLVO">Volvo</option>
<option value="WIESMANN">Wiesmann</option>
</select>
De code is langer, en eindigd hier niet met een </div>, hierna komen er nog 9 dropdown menu's met alle automerken.
Hopende dat één van jullie guru's een oplossing weten.
Alvast bedankt voor alle hulp.
- initialisatie via PHP
Als je je lijst van auto-merken ook uit je database trekt zou je dynamisch je HTML op kunnen bouwen en via PHP de opties selecteren / divs tonen/verbergen op grond van eerder opgeslagen informatie. Eigenlijk op dezelfde wijze als dat je al doet met je "allemerken" selectieveld. Je schrijft en initialiseert je formulier "on-the-fly".
- initialisaie via JavaScript
Indien je formulier uit een zwik statische HTML bestaat is deze aanpak misschien geschikter: bouw je formulier op zoals je zou doen wanneer er nog niets ingevuld was en schrijf dan na afloop wat JavaScript voor het selecteren van opties / het tonen/verbergen van divs op grond van eerder opgeslagen informatie.
Hierbij zou je weer kunnen kiezen voor het gebruiken van een JavaScript library zoals jQuery om je leven wat makkelijker te maken ("write less, do more" is het motto van jQuery). In je oorspronkelijke broncode voor je formulier hoef je dan ook niet per se al "inline css" aan te brengen, als je functionaliteit van jQuery aanroept wordt deze automatisch toegevoegd, je kunt dan een stuk "functioneler" programmeren (toon of verberg div X) in plaats van rechtstreeks in CSS te zitten prutten (zet de display property van div X op block / none).
Omdat je aangeeft dat er nog meer (mogelijk conditionele) dropdowns zijn kan het ook weer helpen om wat hulpfuncties te introduceren die een specifieke taak uitvoeren zoals:
- een functie voor het tonen / verbergen van een div (op grond van een id-parameter)
- een functie voor het selecteren of checken van een optie (op grond van een veldnaam- en waarde-parameter)
EDIT: of een combinatie van beide, waarbij je de twee verschillende doelen (formulier-opbouw en initialisatie) gescheiden houdt:
- gebruik uitsluitend PHP voor de dynamische opbouw van je formulier
- gebruik uitsluitend JavaScript voor de initialisatie (na afloop van opbouw)
Gewijzigd op 17/03/2015 18:04:15 door Thomas van den Heuvel
bedankt voor de ontzettend snelle reactie.
Het principe is vrij duidelijk, zodra men op 'Nee' klikt/selecteert dan komen de 10 overige drop-downs waarin men automerken kan selecteren, tot een maximum van 10 verschillende automerken.
De reden waarom ik dus de code halverwege heb afgekapt is omdat de rest hetzelfde is behalve de ID en Name van benaming van iedere dropdown menu. automerk1, automerk2, etcetera.
Zou ik nu voor 'initialisatie via JavaScript' kiezen, zou je dan een oplossing voor mij hebben?
Of een functionerende voorbeeld waarmee ik aan de slag kan?
Nogmaals bedankt voor de verhelderende uitleg.