SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Show/Hide elements

    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>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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') {

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This doesn't seem to work in IE or Safari

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tobeyt23 View Post
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •