Show en Hide formulier velden afhankelijk van checkbox?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Erick Schluter

Erick Schluter

16/06/2010 01:54:43
Quote Anchor link
Ik wil een formulier maken waar bij je een lijstje met opties hebt met checkboxes bv.:

- 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!
 
PHP hulp

PHP hulp

28/03/2024 11:54:39
 
Joakim Broden

Joakim Broden

16/06/2010 08:30:39
 
Erick Schluter

Erick Schluter

16/06/2010 13:32:39
Quote Anchor link
Hey there,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


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
 
Erick Schluter

Erick Schluter

16/06/2010 13:33:57
Quote Anchor link
Mmhh...wat moet ik doen om alles als <code> te presenteren? Dit was toch <code></code>?

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 -
 
Mark L

Mark L

16/06/2010 13:37:09
Quote Anchor link
Ikzelf zou gaan voor plain javascript, tenzij je er iets groots van wil maken. Want het is zonde om voor zoiets kleins 24KB mee te sturen..

Ik zou zoiets doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


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
 
Erick Schluter

Erick Schluter

16/06/2010 13:47:53
Quote Anchor link
Hey Mark,

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
 
Mark L

Mark L

16/06/2010 14:00:04
Quote Anchor link
Tussen code-tags. Deze moeten alleen tussen vierkante haakjes ;) dus [] en niet <>

Nog een aanvulling op jouw code:
Je gebruikt telkens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '6')
{

echo 'checked="checked"';
}

?>


Is dit niet handiger (en netter) om dit zoiets te doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';
}

?>


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.
 
Erick Schluter

Erick Schluter

16/06/2010 14:29:13
Quote Anchor link
Tsja...ik zat al met die 'checked'...dacht dat deze wel oke was...er is er echter altijd 1 aangevinkt.

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.
 
Mark L

Mark L

16/06/2010 15:18:50
Quote Anchor link
Ik snap je vraag niet.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
if (empty($_POST['aantal_personen']) || $_POST['aantal_personen'] == '10')
?>

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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
if (isset($_POST['aantal_personen']) && $_POST['aantal_personen'] == 10)
?>

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
 
Erick Schluter

Erick Schluter

16/06/2010 16:26:26
Quote Anchor link
Hey mark,
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
 
Mark L

Mark L

16/06/2010 17:36:14
Quote Anchor link
Er hoeft geen radio button aangevinkt staan. Ikzelf zou het discriminerend vinden - ookal ben ik een jongen - als er bijvoorbeeld staat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
Geslacht:
[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
 
Erick Schluter

Erick Schluter

17/06/2010 01:24:52
Quote Anchor link
Hey Mark,

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.
 
Mark L

Mark L

17/06/2010 10:09:48
Quote Anchor link
Het is vaak wel zo dat een formulier helemaal ingevuld moet worden. Dan moet er dus minimaal één radiobutton worden ingevuld. Maar dit moet de user uiteraard doen en niet de server. Bij een select-button staat er wel altijd één geselecteerd. Wil je dit niet, dan kun je bijvoorbeeld de bovenste option een waarde van 'Kies dit/kies dat' meegeven en dat deze niet gekozen mag worden.

Je hebt een privébericht.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.