Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Data Bridge › Validation Toolkit › Show textarea if checkbox is checked?

Show textarea if checkbox is checked?

Thread began 10/14/2013 1:41 am by Nathon Jones Web Design | Last modified 10/16/2013 9:58 am by Nathon Jones Web Design | 10696 views | 8 replies |

10/14/2013 1:41 am | #1 Nathon Jones Web Design

Show textarea if checkbox is checked?

Is it possible to hide a textarea until a user puts a check in a checkbox using Validation Toolkit or does a Submit button need to be pressed?
Here's an example on a site we're developing:
http://www.nathonjones.com/babyfish2013/personalised-baby-toddler-gifts.asp?BFid=BF570

Thanks for any advice offered:
NJ

10/14/2013 9:27 am | #2 Jason ByrnesWebAssist

here is a very basic example to demoinstrate how this can be done:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function toggleTextArea() {
	var theForm = document.form1;
	var theCheck = theForm.checkbox;
	var theTextArea = theForm.textfield2;
	if(theCheck.checked == true) {
		theTextArea.style.display = "block";
	} else {
		theTextArea.style.display = "none";
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="textfield"></label>
  <input type="text" name="textfield" id="textfield" />
  <input name="checkbox" type="checkbox" id="checkbox" onchange="toggleTextArea();" value="1"/>
  <label for="checkbox"></label>
  <label for="textfield2"></label>
  <textarea style="display: none;" name="textfield2" rows="8" id="textfield2"></textarea>
</form>
</body>
</html>

10/14/2013 11:33 am | #3 Nathon Jones Web Design

IE8

Thank you Jason. That doesn't work in IE8, but I assume it works in all modern browsers.
Is there a way to hide the label text until the checkbox has been checked or can you only hide/reveal the textarea itself?

Really appreciate it. That's the only real hold up with this project.
Thank you, again.
NJ

10/14/2013 12:16 pm | #4 Jason ByrnesWebAssist

you could put the text area into a span, and have the JS function change the style of the span by ID.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function toggleTextArea() {
	var theForm = document.form1;
	var theCheck = theForm.checkbox;
	var theTextArea = document.getElementById('textAreaSpan');
	if(theCheck.checked == true) {
		theTextArea.style.display = "block";
	} else {
		theTextArea.style.display = "none";
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="textfield"></label>
  <input type="text" name="textfield" id="textfield" />
  <input name="checkbox" type="checkbox" id="checkbox" onchange="toggleTextArea();" value="1"/>
  <label for="checkbox"></label>
  <span style="display: none;" id="textAreaSpan"><label for="textfield2">label for text area</label>
  <textarea  name="textfield2" rows="8" id="textfield2"></textarea></span>
</form>
</body>
</html>

10/15/2013 1:12 am | #5 Nathon Jones Web Design

Great stuff!

Really great help, thank you Jason.
NJ

10/16/2013 8:37 am | #6 Jason ByrnesWebAssist

you're welcome.

10/16/2013 8:45 am | #7 Nathon Jones Web Design

IE

Sorry, that's not working in Internet Explorer I just realised! Have tried it in IE8 and IE10.
What happens is that the textarea doesn't display until you click somewhere else on the page.
Have I done something wrong or were you aware of that incompatibility?

Thank you.
NJ

10/16/2013 9:48 am | #8 Jason ByrnesWebAssist

I think early IE versions have an issue with the onchange event when used with checkboxes and radio buttons, try using onclick instead.

change:
onchange="toggleTextArea();"

to:
onclick="toggleTextArea();"

10/16/2013 9:58 am | #9 Nathon Jones Web Design

IE

It wasn't working in IE10 either. Onclick has resolved it though. Much appreciated.
NJ

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.