Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Display the relevant div on radio button select

    Another task please...I need to display the appropriate div when a radio button is selected...

    PHP Code:
    <body>
    <
    script type="text/javascript">
    function 
    checkjob(jobvalue){

    if(
    jobvalue="type") {

    document.getElementById("type").style.display "block";

    }else if(
    jobvalue="select"){
    document.getElementById("select").style.display "block";

    }else if(
    jobvalue="tag"){
    document.getElementById("tag").style.display "block";

    }

    }
    </script><br />
    <table width="200">
      <tr>
        <td><label>
          <input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" />
          type</label></td><td><label>
          <input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)"  />
          select</label></td>
          <td><label>
          <input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)"  />
          tag</label></td>
      </tr>
      
    </table>
    <div id="type" style="display:none"><input name="contact" type="text" /></div>
    <div id="tag" style="display:none">tag:<input name="contact" type="text" /></div>
    <div id="select" style="display:none"><select name="">
      <option value="a" selected="selected">option 1</option>
      <option value="b">option 2</option>
    </select></div>
    </body> 

  • #2
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Your problem is this line:
    PHP Code:
    if (jobvalue="select"
    It needs to be
    PHP Code:
    if (jobvalue == "select"
    However, in each if/else if, you also need to set the display of the other divs hidden, that way only 1 will show up at 1 time.

    That being said, tell me how this works for you

    PHP Code:

    <body
        
    <
    script type="text/javascript"
    function 
    checkjob(jobvalue){ 

    if(
    jobvalue == "type"

      
    document.getElementById("type").style.display "block"
      
    document.getElementById("select").style.display "none"
      
    document.getElementById("tag").style.display "none"
    }

    else if(
    jobvalue == "select")

      
    document.getElementById("type").style.display "none"
      
    document.getElementById("select").style.display "block"
      
    document.getElementById("tag").style.display "none"
    }

    else if(
    jobvalue == "tag")

      
    document.getElementById("type").style.display "none"
      
    document.getElementById("select").style.display "none"
      
    document.getElementById("tag").style.display "block"



    </script><br /> 
    <table width="200"> 
      <tr> 
        <td><label> 
          <input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" /> 
          type</label></td><td><label> 
          <input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)"  /> 
          select</label></td> 
          <td><label> 
          <input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)"  /> 
          tag</label></td> 
      </tr> 
       
    </table> 
    <div id="type" style="display:none"><input name="contact" type="text" /></div> 
    <div id="tag" style="display:none">tag:<input name="contact" type="text" /></div> 
    <div id="select" style="display:none"><select name=""> 
      <option value="a" selected="selected">option 1</option> 
      <option value="b">option 2</option> 
    </select></div> 
    </body> 
    Last edited by mvmacd; 12-17-2011 at 05:06 PM. Reason: typo
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Similar to mvmacd's solution, just less code:

    Code:
    <body>
    
    <script type="text/javascript">
    function checkjob(jobvalue)
    {
    	var hiddenDivs = document.getElementById('hiddenDivs').getElementsByTagName('div');
    	for (var i=0; i<hiddenDivs.length; i++)
    	{
    		hiddenDivs[i].style.display = (hiddenDivs[i].id == jobvalue) ? 'block' : 'none';
    	}
    }
    </script>
    <br />
    <table width="200">
      <tr>
        <td><label>
          <input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" />
          type</label></td><td><label>
          <input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)"  />
          select</label></td>
          <td><label>
          <input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)"  />
          tag</label></td>
      </tr>
    
    </table>
    <div id="hiddenDivs">
    	<div id="type" style="display:none"><input name="contact" type="text" /></div>
    	<div id="tag" style="display:none">tag:<input name="contact" type="text" /></div>
    	<div id="select" style="display:none"><select name="">
    	  <option value="a" selected="selected">option 1</option>
    	  <option value="b">option 2</option>
    	</select></div>
    </div>
    </body>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks ya'll...up and running


  •  

    Posting Permissions

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