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> Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
tobeyt23 Posted May 1, 2007 Author Share Posted May 1, 2007 thank you! Quote Link to comment 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? Quote Link to comment 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.