Show en Hide formulier velden afhankelijk van checkbox?
- ik wil dansen
- ik wil zingen
- ik wil iets anders
Als iemand nu bv. 'ik wil dansen' aanvinkt dan moet er tevoorschijn komen:
- ik wil dansen
met 10 - 8 - 6 personen
...dit zijn dan 3 radio-buttons.
En er moet bijvoorbeeld als 'ik wil iets anders' wordt aangevinkt op deze manier een textarea tevoorschijn komen waar men een tekstje kwijt kan.
Nu heb ik dit soort zaken wel eens gezien...en ik heb al veel gevonden aan show/hide scripts, ook AJAX enzo...maar ik kom er maar niet uit.
Heeft iemand een verhelderende uitleg of een link naar een goede tutorial of natuurlijk een goed werkend demo-script?
BvD!
en met jquery:
http://jqueryfordesigners.com/jquery-tabs/
Ik zou voor de jQuery gaan want die werkt lekker :)
Bedankt voor de links! Dit soort zaken bedoel ik...maar...
Als ik nu bv. 3 checkboxen heb:
- ik wil dansen
- ik wil zingen
- ik wil iets anders
Dan kan ik deze allemaal dezelfde 'name' geven, dit heb ik nu als volgt:
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
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
<input type="checkbox" name="checkbox_serie[]" onClick="showhidefield()" value="ik_wil_dansen" tabindex="1">Ik wil dansen
<br>
<div id="hideablearea" style="display:none;">
Geef a.u.b. aan met hoeveel personen u wilt dansen:<br />
<input type="radio" name="aantal_personen" class="radio" value="10" tabindex="2" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '10')
{
echo 'checked="checked"';
}
?> /> 10 personen
<input type="radio" name="aantal_personen" class="radio" value="8" tabindex="3" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '8')
{
echo 'checked="checked"';
}
?> /> 8 personen
<input type="radio" name="aantal_personen" class="radio" value="6" tabindex="4" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '6')
{
echo 'checked="checked"';
}
?> /> 6personen
</div>
<!-- en dan nog de checkbox 'ik wil iets anders': -->
<input type="checkbox" name="checkbox_serie[]" onClick="showhidefield2()" value="ik_wil_iets_anders" tabindex="5">Ik wil iets anders
<br>
<div id="hideablearea2" style="display:none;">
Omschrijf hetgeen u in gedachten heeft:<br />
<textarea name="iets_anders_tekst" rows="9" cols="30" tabindex="7"><?php echo $iets_anders_tekst ?></textarea>
</div>
<br>
<div id="hideablearea" style="display:none;">
Geef a.u.b. aan met hoeveel personen u wilt dansen:<br />
<input type="radio" name="aantal_personen" class="radio" value="10" tabindex="2" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '10')
{
echo 'checked="checked"';
}
?> /> 10 personen
<input type="radio" name="aantal_personen" class="radio" value="8" tabindex="3" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '8')
{
echo 'checked="checked"';
}
?> /> 8 personen
<input type="radio" name="aantal_personen" class="radio" value="6" tabindex="4" <?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '6')
{
echo 'checked="checked"';
}
?> /> 6personen
</div>
<!-- en dan nog de checkbox 'ik wil iets anders': -->
<input type="checkbox" name="checkbox_serie[]" onClick="showhidefield2()" value="ik_wil_iets_anders" tabindex="5">Ik wil iets anders
<br>
<div id="hideablearea2" style="display:none;">
Omschrijf hetgeen u in gedachten heeft:<br />
<textarea name="iets_anders_tekst" rows="9" cols="30" tabindex="7"><?php echo $iets_anders_tekst ?></textarea>
</div>
Oke, dit werkt...
Maar ik snap niet hoe ik zorg dat je 1 van de checkboxes uit de 'checkbox_serie[]' verplicht moet aanvinken.
Ik hoop dat ik duidelijk ben.
Ik heb alles even tussen de code tags gezet deze beginnen en eindigen [] [/modedit]
Gewijzigd op 16/06/2010 14:35:00 door Bas IJzelendoorn
Vervang de < en > door [ ] ;-) Voortaan liever je bericht bewerken in plaats van een nieuw bericht te plaatsen :-)[/modedit]
Gewijzigd op 16/06/2010 16:52:49 door Chris -
Ik zou zoiets doen:
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
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
<script>
<!--
function install () {
var selectWat = ['dans', 'zang', 'anders']; // id's+values van de elementen die in de select staan.
var selectCur;
for (x in selectWat) { // eerst allemaal hiden d.m.v. JS (als je dat via CSS doet, kunnen mensen die geen JS aanhebben je formulier niet invullen.
document.getElementById(selectWat[x]).style.display = 'none';
}
document.getElementById('wat').onchange = function (evt) {
if (selectCur !== undefined) { // als een element al word 'ge-showd', deze dan weer 'hiden'
document.getElementById(selectCur).style.display = 'none';
}
try {
document.getElementById(this.value).style.display = 'block'; // show een element
selectCur = this.value; // onthoud dat dit element geshowd word, zodat deze weer word ge-hide bij een andere keuze.
}
catch (e) { } // Stel dit element bestond niet, dan krijgen we nu geen error ;)
}
document.getElementById('wat').onchange(); // voor het geval er al n staat geselecteerd.
}
-->
</script>
<body onload="install();">
<select id="wat">
<option value="NULL"></option>
<option value="dans">Ik wil dansen</option>
<option value="zang">Ik wil zingen</option>
<option value="anders">Ik wil iets anders</option>
</select>
<div id="dans">
<noscript>Vul dit in, als je wilt dansen:<br /></noscript>
<input type="radio" name="dans" value="10" id="dans10" /><label for="dans10">Ik wil dansen met 10 personen</label><br />
<input type="radio" name="dans" value="8" id="dans8" /><label for="dans8">Ik wil dansen met 8 personen</label><br />
<input type="radio" name="dans" value="6" id="dans6" /><label for="dans10">Ik wil dansen met 6 personen</label><br />
</div>
<div id="zang">
<noscript>Vul dit in, als je wilt zingen:<br /></noscript>
I sing!</div>
<div id="anders">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
Wat dan?</div>
</body>
<!--
function install () {
var selectWat = ['dans', 'zang', 'anders']; // id's+values van de elementen die in de select staan.
var selectCur;
for (x in selectWat) { // eerst allemaal hiden d.m.v. JS (als je dat via CSS doet, kunnen mensen die geen JS aanhebben je formulier niet invullen.
document.getElementById(selectWat[x]).style.display = 'none';
}
document.getElementById('wat').onchange = function (evt) {
if (selectCur !== undefined) { // als een element al word 'ge-showd', deze dan weer 'hiden'
document.getElementById(selectCur).style.display = 'none';
}
try {
document.getElementById(this.value).style.display = 'block'; // show een element
selectCur = this.value; // onthoud dat dit element geshowd word, zodat deze weer word ge-hide bij een andere keuze.
}
catch (e) { } // Stel dit element bestond niet, dan krijgen we nu geen error ;)
}
document.getElementById('wat').onchange(); // voor het geval er al n staat geselecteerd.
}
-->
</script>
<body onload="install();">
<select id="wat">
<option value="NULL"></option>
<option value="dans">Ik wil dansen</option>
<option value="zang">Ik wil zingen</option>
<option value="anders">Ik wil iets anders</option>
</select>
<div id="dans">
<noscript>Vul dit in, als je wilt dansen:<br /></noscript>
<input type="radio" name="dans" value="10" id="dans10" /><label for="dans10">Ik wil dansen met 10 personen</label><br />
<input type="radio" name="dans" value="8" id="dans8" /><label for="dans8">Ik wil dansen met 8 personen</label><br />
<input type="radio" name="dans" value="6" id="dans6" /><label for="dans10">Ik wil dansen met 6 personen</label><br />
</div>
<div id="zang">
<noscript>Vul dit in, als je wilt zingen:<br /></noscript>
I sing!</div>
<div id="anders">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
Wat dan?</div>
</body>
Ik heb het lichtelijk omslachtig gemaakt, maar daarom is dit breder inzetbaar. Ook zou je deze input buttons kunnen laten genereren door JavaScript, maar als iemand dan wegklikt (een andere value in de select aanklikt), word de value die je in had gevuld in een hide-element niet onthouden. Dit zou ik al storend ervaren.
Hoop trouwens dat je begrijpt wat ik hier doe.
Gewijzigd op 16/06/2010 13:41:48 door Mark L
Dit ziet er ook wel leuk uit...een dropdown met de opties...ga ik mee experimenteren!
(hoe heb jij trouwens de code in jouw reactie zo mooi gepresenteerd?)
Bedankt!
Gewijzigd op 16/06/2010 13:50:56 door Erick Schluter
Nog een aanvulling op jouw code:
Je gebruikt telkens:
Code (php)
Is dit niet handiger (en netter) om dit zoiets te doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
$aantal = array(2 => 10, 3 => 8, 4 => 6);
foreach ($aantal as $tabindex => $value) {
echo '<input type="radio" name="aantal_personen" class="radio" value="'.$value.'" tabindex="'.$tabindex.'" id="dans'.$value.'"';
if (isset($_POST['aantal_personen']) && $_POST['aantal_personen'] == $value) {
echo ' checked="checked"';
}
echo '/><label for="dans'.$value.'"> 6personen</label>';
}
?>
$aantal = array(2 => 10, 3 => 8, 4 => 6);
foreach ($aantal as $tabindex => $value) {
echo '<input type="radio" name="aantal_personen" class="radio" value="'.$value.'" tabindex="'.$tabindex.'" id="dans'.$value.'"';
if (isset($_POST['aantal_personen']) && $_POST['aantal_personen'] == $value) {
echo ' checked="checked"';
}
echo '/><label for="dans'.$value.'"> 6personen</label>';
}
?>
Ik zie dat je trouwens had staan: als deze var leeg is, óf hij is gezet met deze waarde, dan check je hem. Maar een radiobutton kan maar één check tegelijk hebben en als er niets gecheckt zou zijn, zouden ze allemaal gecheckt worden. Het word een beetje vaag en abstract, hoop dat je het snapt.
Ook als in dit geval iemand helemaal niet kiest voor 'ik wil dansen', zelfs dan is er 1 vinkje aangevinkt. Dit is natuurlijk niet op te lossen met radio-buttons...moet ik hier wellicht ook checkboxes voor gebruiken?
Voor de opties: 10 personen, 8 personen en 6 personen bedoel ik dan.
Snap je wat hier staat? Er staat in moeilijk Nederlands: als ($_POST['aantal_personen'] leeg of 0 is OF $_POST[''aantal_personen'] is gelijk aan 10), dan...
Dus als $_POST['aantal_personen'] niet is ingevuld, word deze wel gecheckt. Dit is niet de bedoeling. Vandaar dat ik dit in mijn voorbeeld heb veranderd naar:
wat eigenlijk betekend: Als ($_POST['aantal_personen'] als variabele bestaat (dus is meegestuurd en niet leeg is) EN $_POST['aantal_personen'] is gelijk aan 10), dan...
En ik heb het in mijn stukje dan nog iets compacter neergezet, maar dit is waarschijnlijk nog te moeilijk voor je. Als je je meer verdiept in PHP, zul je zulk soort manieren waarschijnlijk gaan waarderen.
Hoe groot is jouw PHP kennis trouwens? er staan een aantal goede PHP-beginners tutorials op internet. Dit geld ook voor HTML, CSS, JS en alle andere talen die je zou willen gebruiken.
Gewijzigd op 16/06/2010 15:20:36 door Mark L
Ik heb zitten experimenteren en moet zeggen dat ik er bijna uit ben!
Het is natuurlijk ook zaak dat velden ingevuld blijven wanneer er iets fout gaat...en meer van dat soort kwesties.
Jouw 'isset' oplossing voor het bepalen van een aangevinkte radio-button werkt prima! Er is nu geen enkele radiobutton aangevinkt wanneer men deze voor het eerst bekijkt. Als mer er 1tje aanvinkt blijft deze aangevinkt, ook als er een ander veld foutief wordt ingevuld en er een foutboodschap verschijnt.
Ik dacht dat er 'altijd' 1 radio button aangevinkt moest staan, dat is nu dus niet het geval. is dat wenselijk of maakt dit dus helemaal niet uit?
Als ik alles klaar heb laat ik de kale versie wel aan je zien,
bedankt zover!
P.S. Mijn PHP skills zullen wel altijd te wensen over laten, ik ben er de laatste tijd ook niet constant mee bezig...en dat moet eigenlijk wel. Ik ga me er weer goed in verdiepen!
Gewijzigd op 16/06/2010 16:27:32 door Erick Schluter
Code (php)
1
2
3
2
3
Geslacht:
[x] Man
[ ] Vrouw
[x] Man
[ ] Vrouw
Hierbij is Man dus standaard aangevinkt. Dat vind ik discriminerend t.o.v. de vrouw. (Discriminerend is niet het woord, maar oneerlijk ofzo, of onrechtvaardig.. of gewoon raar :P Het is alsof je als webmaster al heeft bepaald dat de gebruiker Man is)
Dit in tegenstelling uiteraard als iemand dit zelf al heeft ingevuld ;) Dan is dit uiteraard wenselijk (ook als dit bijvoorbeeld uit een Database komt), of als je informatie uit $_SERVER variabelen haalt. Dit kan uiteraard vervalst/fout zijn, maar kan wel een basis vormen en dat de gebruiker dit kan veranderen. Denk bijvoorbeeld aan het kiezen van een taal: de browser stuurt hier al informatie over door en deze kan als basis gebruikt worden.
Ik kijk naar je kale versie uit!
succes!
Gewijzigd op 16/06/2010 18:03:04 door Mark L
Bij man/vrouw is het inderdaad niet logisch...maar ik dacht begrepen te hebben dat radio-buttons zo werkte. Van alle gepresenteerde opties moet er veelal 1tje aangeklikt zijn. Bij man/vrouw is dit inderdaad 'pretentieus'...is dat het woord dat je zocht :lol:
Als je mij jouw emailadres even geeft dan stuur ik je een linkje waar je het eindresultaat kunt zien. Ik heb het vanwege haast meteen verwerkt in de opdracht waarvoor het bedoeld was en wil die liever niet hier noemen ivm enge zoekmachineresultaten...als je begrijpt wat ik bedoel.
Je hebt een privébericht.