[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

Javascript show one of two textareas based on radio button selection

Hi,

I need to show two textareas, but hide one, and show the other based on radio button selection.

So there'll be two radio buttons, and depending on which is selected, it'll show one, or the other textarea.

I have a javascript function already in place which I send the element ID to, and it shows/hides (by display:block, display:none), I don't know if this could be used in some way for this?

Any help would be awesome.

Thanks.
0
i-CONICA
Asked:
i-CONICA
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Hello i-CONICA,

Try this for example :


<!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" />
<script language="javascript">
	function changeTA(d) {
		var inputs = d.getElementsByTagName("input");
		for(var i=0; i<inputs.length;i++) {
			if( inputs[i].type == "radio") {
				var radio = inputs[i];
				document.getElementById(radio.value).style.display = radio.checked ? "block" : "none";
			}
		}
	}
</script>
</head>
<body>
	<div class="myradio1">
        <input type="radio" id="radiob1" name="radiob" checked="checked" onchange="changeTA(this.parentNode)" value="ta1" />Show Textarea 1<br />
        <input type="radio" id="radiob2" name="radiob" onchange="changeTA(this.parentNode)" value="ta2"  />Show Textarea 2
    </div>
<br />
<textarea id="ta1" cols="64" rows="16" style="display:block">I'm textarea1</textarea>
<textarea id="ta2" cols="64" rows="16" style="display:none">I'm textarea2</textarea>
</body>
</html>

Open in new window

0
 
i-CONICAAuthor Commented:
Thank you. :)
0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now