Extra veld laten zien na aanklikken textbox of radiobutton

Status
Niet open voor verdere reacties.

Rubensky

Forumleiding
Hoofdbeheerder
Lid geworden
20 nov 2012
Berichten
335
Mensen,

Ik heb exact dezelfde vraag als dat hier in dit topic werd gesteld: http://www.helpmij.nl/forum/showthr...kbox-is-aangevinkt-extra-tekstveld-laten-zien

CSSHunter geeft een sluitend antwoord over hoe het moet en geeft daar vervolgens de code bij. Nu heb ik deze gebruikt om aan mijn wensen te voldoen. Echter wil ik het met meerdere tekstvakken en radiobuttons doen. (waarschijnlijk 3 en later misschien meer.)

Nu heb ik de functie gekopieerd en een andere naam gegeven waardoor het werkt. De vraag waar ik nu mee zit is: Kan je het houden op één functie en deze uitbreiden?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>extra-tekstvakje</title>
<!-- http://www.helpmij.nl/forum/showthread.php/766564-Als-checkbox-is-aangevinkt-extra-tekstveld-laten-zien -->

<style type="text/css">
html {
	height: 100%;
	padding-bottom: 1px;
	}
body {
	width: 990px;
	margin: 0 auto;
	font-family: 'Trebuchet MS', artial, helvetica, sans-serif;
	font-size: 100.1%;
	}
input {
	margin-right: 10px;
	}
#extravraag {
	display: none;
	}

  #google {
  	display: none;
  	}
</style>

</head>

<body id="home">

<form method="post" action="antwoord.php">
    <p><strong>Welke social media kanalen gebruikt u?</strong></p>
    <p>
    	<input type="checkbox" name="vraag16a" value="twitter" />Twitter<br />
    	<input type="checkbox" name="vraag16b" value="facebook" />Facebook<br />
    	<input type="checkbox" name="vraag16c" value="linkedin" />LinkedIn<br />
    	<input type="checkbox" name="vraag16d" value="hyves" />Hyves<br />
    	  	<input type="checkbox" name="vraag16e" value="google" onclick="toggleExtra2();" />google

<span id="google"> &gt; wat doe je met google <input type="text" name="extra" size="20" maxlength="50" /></span> <br />

    	<input type="checkbox" name="vraag16f" value="pinterest" />Pinterest<br />
    	<input type="checkbox" name="vraag16g" value="fora" onclick="toggleExtra();" />Fora
    	<span id="extravraag"> &gt; Welke fora? <input type="text" name="extra" size="20" maxlength="50" /></span>
    </p>
</form>

<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='';
	}
}
//]]>

//<![CDATA[
function toggleExtra2(){
	if( document.getElementById('google').style.display != 'inline-block'){
		document.getElementById('google').style.display = 'inline-block';
		document.getElementById('google').getElementsByTagName('input')[0].focus();
	}
	else {
		document.getElementById('google').style.display = 'none';
		document.getElementById('google').getElementsByTagName('input')[0].value='';
	}
}
//]]>
</script>

</body>
</html>
 
Een oplossing kan deze zijn.
Geef bij elke blokje dezelfde naam aan span id="..." en input name="..."
Gebruik overal onclick="showhide(this)"
(this) is de referentie naar de betreffende input.

Code:
html:

<input type="checkbox" name="vraag16g" value="fora" onclick="showhide(this)" />Fora
<span id="vraag16g" class="showhide">
&gt; Welke fora?
<input type="text" name="extra" size="20" maxlength="50" />
</span>

css:

/*
#extravraag { display: none; }
#google { display: none; }
*/
.showhide {
  display: none;
}

javascript

<script type="text/javascript">
function showhide(elem) {
  var Checked = elem.checked;
  var SpanId = elem.getAttribute("name");
  document.getElementById(SpanId).style.display = (Checked) ? "inline-block" : "none";
}
</script>
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan