Als checkbox is aangevinkt extra tekstveld laten zien.

Status
Niet open voor verdere reacties.
D

Diniz

Gebruiker
Lid geworden
1 jun 2009
Berichten
62
Ik wil als er een bepaalde checkbox wordt aangevinkt een extra invoertekstveld wordt weergegeven:

kanalen.png

Zoals hierboven, als de checkbox van fora wordt aangevinkt moet het veld welke fora verschijnen en weer verdwijnen als de checkbox wordt uitgevinkt. Helaas heb ik weinig verstand van javascript, wie kan mij even op weg helpen?

Dit is de code:

[JS]
<form method="post" action="antwoord.php">

<b>Welke social media kanalen gebruikt u?</b>
<br>
<table border="0">
<tr>
<td><input type="checkbox" name="vraag16a" value="twitter"></td><td>Twitter</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16b" value="facebook"></td><td>Facebook</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16c" value="linkedin"></td><td>LinkedIn</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16c" value="hyves"></td><td>hyves</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16d" value="google"></td><td>Google +</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16e" value="pinterest"></td><td>Pinterest</td>
</tr>
<tr>
<td><input type="checkbox" name="vraag16f" value="fora"></td><td>Fora</td>
</tr>
<td>Welke fora?</td><td><input type="text" name="extra" size="20" maxlength="50"></td>
</tr>

<script type="text/javascript">

if(form.vraag16f.checked == true){
document.write('textveld laten zien');
}
</script>
</table>
</form>
[/JS]
 
Je zou het op kunnen lossen door het veld te verbergen met CSS display: none;
en dan op moment dat de checkbox verandert de klasse weg te halen waardoor het zichtbaar wordt.

Onderstaande code is een richtlijn. Ik heb de code niet getest maar het geeft je in ieder geval een idee hoe je het aan zou kunnen pakken.
Code: 
// CSS
<style type="text/css">
.hidden{ display: none; }
</style>

// HTML
<input type="checkbox" id="vraag16f" name="vraag16f" onclick="showField();" />
<input type="text" id="extra" name="voorbeeld" class="hidden" />

// Javascript
function showField()
{
  if(document.getElementById('vraag16f').checked)
     document.getElementById('extra').classname = "";
  else
    document.getElementById('extra').classname = "hidden";
}
 
Krijg het nog niet aan de gang. Blijkbaar loopt hij de functie niet door. writeln("functie wel geladen"); doet namelijk ook niets.

[JS]
function showField()
{
writeln("functie wel geladen");
if(document.getElementById('vraag16f').checked)
document.getElementById('extra').classname = "";
writeln("checked");
else
document.getElementById('extra').classname = "hidden";
writeln("not checked");
}
[/JS]
 
Laatst bewerkt door een moderator:
Verder nog wat lopen speuren en proberen, ik kom nu niet verder dan dit:

[JS]
<html>
<head>

<style type="text/css">
.hidden{ display: none; }
</style>

</head>
<body>

<input id="vraag16f" type="checkbox" onclick="andersveld()">Anders

<script language="javascript" type="text/javascript">

//<input class="hidden" type="text" name="extra" size="20" maxlength="50">

function andersveld(){
var gekozen = document.getElementById("vraag16f").checked;
alert(gekozen);
//if (gekozen==true);
//{
//textveld moet zichtbaar zijn
//}
//if (gekozen==false);
//{
//textveld moet niet zichtbaar zijn"
//}
}
</script>

</body>
</html>
[/JS]
 
Hoi Diniz,
De suggestie van gast0195 is in principe goed, maar werkt in de praktijk om een paar redenen niet:
  • De elementen worden aangeroepen met getElementById('...'), maar ze hebben in je html-code een name en geen ID.
  • In het script wordt classname gebruikt, maar daar moet een hoofdletter in zitten: className.
Om andere vergissingen te voorkomen, zou ik liever direct in de style van het tekstveld ingrijpen via een ID, en niet van className wisselen.
Code: 
#extravraag {
	display: none;
	}
[JS]<script type="text/javascript">
//<![CDATA[
function toggleExtra(){
if( document.getElementById('extravraag').style.display != 'inline-block'){
document.getElementById('extravraag').style.display = 'inline-block';
document.getElementById('extravraag').getElementsByTagName('input')[0].focus();
}
else {
document.getElementById('extravraag').style.display = 'none';
document.getElementById('extravraag').getElementsByTagName('input')[0].value='';
}
}
//]]>
</script>[/JS]
Dan zou er iets als dit uit kunnen komen:

Toelichting:
  • Om de bezoeker behulpzaam te zijn, wordt de focus (knipperende cursor) alvast in het tekstvakje gezet als je de Fora-optie aanklikt: dan kan je meteen invullen.
  • Bij het uitvinken van de Fora-optie wordt automatisch de value van het tekstvakje op "" (leeg) gezet, anders zal na invullen van het tekstvak en vervolgens weer uitvinken van de Fora-optie toch de ingevulde waarde worden doorgezonden.
  • In de script-tag mag er geen language="javascript" bij staan, met alleen type="text/javascript" is het correct.
  • Zonder tabel kan het ook. ;)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt door een moderator:
Werkt perfect! Je extra toevoegingen zijn ook super. Mooi dat je ook even beschrijft hoe het in elkaar steekt, zo leer ik het snel. Bedankt CSShunter!
 
Laatst bewerkt door een moderator:
Toch nog aanvullende vraag, ik wil deze functie ook toepassen op een radiobutton. Als de radiobutton geselecteerd is moet dus nu het veld verschijnen en verdwijnen zodra er een andere radiobutton wordt geselecteerd. Heb het geprobeerd met o.a. onload="toggleExtra(); maar dan gebeurd er niets.
 
Hoi Diniz,
Een onload werkt alleen bij opening van de pagina, en doet het dus niet.

Wat moet er gebeuren als je dezelfde keuzes laat maken met radio-buttons, dus nu zonder combinatie-mogelijkheid met checkbox-vinkjes?

  1. De radio-buttons zijn wisselschakelaars: als de ene aan staat, staat de andere uit.
  2. Bij een klik op Fora moet het extra tekstvakje opengaan, maar dat mag nu niet meer verdwijnen als nog een keer op Fora wordt geklikt. Want nog een keer op Fora klikken bevestigt alleen de Fora-keuze, en zet 'm nu niet uit (zoals eerder bij het vink-vakje).
  3. Dus op de Fora-onclick hoeft nu alleen het extra vakje geopend te worden:
    [JS]function openExtra(){
    document.getElementById('extravraag').style.display = 'inline-block';
    document.getElementById('extravraag').getElementsByTagName('input')[0].focus();
    }[/JS]
  4. Bij een klik op alle andere opties moet het tekstvakje wel verdwijnen.
  5. Die krijgen dus een onclick met de verberg-instructies:
    [JS]function closeExtra(){
    document.getElementById('extravraag').style.display = 'none';
    document.getElementById('extravraag').getElementsByTagName('input')[0].value='';
    }[/JS]
In de html wordt het dan:
HTML: 
<form method="post" action="antwoord.php">
    <p><strong>Welke social media kanalen gebruikt u het liefst?</strong></p>
    <p>
    	<input type="radio" name="vraag16" value="twitter" onclick="closeExtra();" />Twitter<br />
    	<input type="radio" name="vraag16" value="facebook" onclick="closeExtra();" />Facebook<br />
    	<input type="radio" name="vraag16" value="linkedin" onclick="closeExtra();" />LinkedIn<br />
    	<input type="radio" name="vraag16" value="hyves" onclick="closeExtra();" />Hyves<br />
    	<input type="radio" name="vraag16" value="google" onclick="closeExtra();" />Google +1<br />
    	<input type="radio" name="vraag16" value="pinterest" onclick="closeExtra();" />Pinterest<br />
    	<input type="radio" name="vraag16" value="fora" onclick="openExtra();" />Fora
    	<span id="extravraag"> &gt; Welke fora? <input type="text" name="extra" size="20" maxlength="50" /></span>
    </p>
</form>
NB: De radiobuttons krijgen allemaal dezelfde (groeps-)name, want er is voor deze groep maar 1 antwoord tegelijk mogelijk.

Met vriendelijke groet,
CSShunter
 
csshunter zei:
Uitleg en voorbeeld
Klik om te vergroten...

Het werkt niet alleen, dankzij jouw uitleg snap ik het ook nog een keer! Nog 1 vraag, waarom gebruik jij als afsluiting bijvoorbeeld <br /> i.p.v. <br>? Is dat volgens de laatste HTML opmaak standaarden?
 
Hoi Diniz,
Of je <br> of <br /> moet gebruiken, hangt af van welk Doctype je gebruikt.

  • Bij het Doctype html4.01 of html5 moet <br> gebruikt worden
  • Bij het Doctype xhtml moet <br /> gebruikt worden.
    Dat is omdat xhtml voorschrijft dat elke tag ook afgesloten moet worden door een gelijknamige eind-tag.
    Maar sommige tags hebben helemaal geen eigen eind-tag: <br>, <img>, <meta>, <link>, <hr>, enz.! :rolleyes:
    Dat zijn tags die geen inhoud in zich hebben waarvoor het eind opgegeven moet worden. Om toch aan de xhtml-eis van "wellformedness" te voldoen, moeten ze dan zogenaamd self-closing worden gemaakt, door op het eind de sluit-slash in te voegen.
PS: De html-validator rekent je er genadeloos op af, als je het fout doet! ;)

Met vriendelijke groet,
CSShunter
 
Ah ok, en wel doctype geniet de voorkeur? Of hangt dat af van de situatie?
 
Laatst bewerkt door een moderator:
Zelf gebruik ik bij voorkeur xhtml-Strict, dat is streng en geeft goede waarborgen voor cross-browser dezelfde resultaten.

  • In een aantal gevallen kan xhtml-Strict niet, en moet je xhtml-Transitional gebruiken (bv. als je bij een link target="_blank" hebt staan om de link in een nieuw tabblad te laten openen; zie ook hier).
    Maar om toch zo mooi mogelijke code te krijgen, kan je dan beginnen met het xhtml-Strict doctype (en daarop testen met de html-validator), en dat pas op het laatst omzetten in xhtml-Transitional.
  • Voor sommige foefjes is html5 nodig, dan kan xhtml-Strict ook niet (dan is het wel oppassen geblazen of Internet Explorer 8 en 9 het goed kunnen interpreteren zonder extra hulpmiddelen).
Het hangt er dus inderdaad van af.

Voor meer leesvoer en verzuchtingen over Doctypes en aanverwante zaken:
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Duidelijk, ik gebruik target="_blank" altijd als ik naar externe websites verwijs, ik hou mijn bezoekers graag ook nog op mijn eigen website;). Maar de logica is me nu duidelijk. Zal het leesvoer eens doornemen, het is toch weekend. En ik ga mijn code ook eens door die validators heen halen, kijken wat voor verbeteringen dat oplevert. Bedankt voor al je uitgebreide antwoorden!
 
Laatst bewerkt door een moderator:
Topic opgeschoond van de onnodige quotes.

@diniz: Gaarne in vervolg gebruik maken van de knop "Reageer op vraag" of venster "Snel reageren".
Nu quote je telkens de voorganger. Topics worden zo onnodig lang met wederom de gehele tekst van je voorganger.
Een quote (of een deel van) kan men gebruiken als men ergens specifiek op wilt reageren.;)
 
Sorry, maar waar heb je het over, weet je wel hoe een forum werkt? Als het geen meerwaarde heeft de gehele post te weergeven quote ik het zoals ik deed bij mijn quote "uitleg en voorbeeld" ipv de gehele post. Een quote dient ervoor om te specificeren waar je je reactie of antwoord op baseert. Je maakt duidelijk hoe de dialoog in elkaar steekt. Ik mag dan geen javascript held zijn, maar draai al jaren in vele fora mee, en jouw ingrijpen druist tegen fora netiquete. Voel je niet aangevallen maar leer hier van.
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan