Show/Hide elements

**tobeyt23** · May 1, 2007 13:05

Trying to show or hide elements based on when a user selects a certain radio form input. What i have below doesn't seem to work any suggestions.

Code:

<!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 type = "text/javascript" language = "Javascript">
	function Proof(obj) {
		if (document.getElementById('proof')radios.checked.value == "no") {
			displayValue = "block";
		} else {
			displayValue = "none";
		}
		document.getElementById('proof_type').style.display = displayValue;
	}

</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
<input name="proof" type="radio" id="proof" tabindex="1" value="yes" onchange="Proof(this);" /> Yes
<input name="proof" type="radio" id="proof" tabindex="2" value="no" onchange="Proof(this);" /> No
<div id="proof_type" style="display:none;">Proof Type</div>
</form>
</body>
</html>

**MikeFoster** · May 1, 2007 15:02

Hi tobeyt23,

Welcome to SPF!

I know this is not exactly what you need but it's a demo I already have done and it might be helpful: Selectable Fieldsets.

**MikeFoster** · May 1, 2007 15:09

Btw... in your code, all you need to do is change this...

Code:

if (document.getElementById('proof')radios.checked.value == "no") {

to this...

Code:

if (obj.value == 'yes') {

**Kravvitz** · May 1, 2007 15:25

You seem to be confused. Your conditional has invalid syntax in it.

Check out Show a Textbox When a Radio Button is Selected

By the way, IDs should be unique, so you should not set IDs on radio buttons that are the same as their the name.

**tobeyt23** · May 2, 2007 08:11

This doesn't seem to work in IE or Safari

**MikeFoster** · May 2, 2007 11:05

Code:

<!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 type = "text/javascript" language = "Javascript">
  function Proof(obj) {
    //if (document.getElementById('proof')radios.checked.value == "no") {
    if (obj.value == 'yes') {
      displayValue = "block";
    } else {
      displayValue = "none";
    }
    document.getElementById('proof_type').style.display = displayValue;
  }

</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
<input name="proof" type="radio" tabindex="1" value="yes" onclick="Proof(this);" /> Yes
<input name="proof" type="radio" tabindex="2" value="no" checked='true' onclick="Proof(this);" /> No
<div id="proof_type" style="display:none;">Proof Type</div>
</form>
</body>
</html>

**muazzez** · May 2, 2007 13:04

Code:

 
<script type = "text/javascript">

  function Proof(obj) {
  var el = document.getElementById('proof_type');
  el.style.display = (obj.value !="no")? "block" : "none" ;
  }

</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
<input name="proof" id="rad0" type="radio" tabindex="1" value="yes" onclick="Proof(this);" /> Yes
<input name="proof" id="rad1"  type="radio" tabindex="2" value="no" checked='true' onclick="Proof(this);" /> No
<div id="proof_type" style="display:none;">Proof Type</div>
</form>
</body>
</html>

Code:

   
<script type = "text/javascript">

  function Proof() {
  var el = document.getElementById('proof_type');
  var r, i = 0;
  while( r = document.getElementsByName('proof')[i++]){
  if(r.checked) {   el.style.display = (r.value =="yes")? "block" : "none" ; }
  }
  }

</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
<input name="proof" id="rad0" type="radio" tabindex="1" value="yes" onclick="Proof();" /> Yes
<input name="proof" id="rad1"  type="radio" tabindex="2" value="no" checked='true' onclick="Proof();" /> No
<div id="proof_type" style="display:none;">Proof Type</div>
</form>
</body>
</html>

**Kravvitz** · May 2, 2007 13:26

Originally Posted by tobeyt23

This doesn't seem to work in IE or Safari

Were you responding to me? If so, did the page finish loading? There was a problem with how IE5/Mac was handling one of the CSS rules. I've fixed that now.

User Tag List

Thread: Show/Hide elements

Thread Tools

Display

Show/Hide elements

Bookmarks

Bookmarks

Posting Permissions