tobeyt23 Posted May 1, 2007 Share Posted May 1, 2007 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. <!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').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> Link to comment https://forums.phpfreaks.com/topic/49525-showhide-elements/ Share on other sites More sharing options...
veridicus Posted May 1, 2007 Share Posted May 1, 2007 I think you want to say... if (document.getElementById('proof').checked) { Checked is a boolean. Link to comment https://forums.phpfreaks.com/topic/49525-showhide-elements/#findComment-242810 Share on other sites More sharing options...
tobeyt23 Posted May 1, 2007 Author Share Posted May 1, 2007 thank you! Link to comment https://forums.phpfreaks.com/topic/49525-showhide-elements/#findComment-242816 Share on other sites More sharing options...
tobeyt23 Posted May 2, 2007 Author Share Posted May 2, 2007 This doesn't seem to work in Safari or Explorer? Link to comment https://forums.phpfreaks.com/topic/49525-showhide-elements/#findComment-243478 Share on other sites More sharing options...
nogray Posted May 2, 2007 Share Posted May 2, 2007 You have two ids with the same value (id="proof"), ids should be uniqe for each element. Also, use onclick event to capture the user selection and since you passing the object to the function, you can just use obj.value <!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 (obj.value == "no") { // if you using class name to set the display property, use block. // if you set the style in the tag (e.g. <div style="display:none"> // use nothing "" // the second is a better option for layout. displayValue = ""; } 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_1" tabindex="1" value="yes" onclick="Proof(this);" /> Yes <input name="proof" type="radio" id="proof_2" tabindex="2" value="no" onclick="Proof(this);" /> No <div id="proof_type" style="display:none;">Proof Type</div> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/49525-showhide-elements/#findComment-243577 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.