Extra veld laten zien na aanklikken textbox of radiobutton

Rubensky · 4 mei 2017

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>

bron · 9 mei 2017

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.

Extra veld laten zien na aanklikken textbox of radiobutton

Rubensky

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy