Solved

JavaScript- Radio Button and Text Field events

Posted on 2009-05-06
3
1,436 Views
Last Modified: 2013-12-25
Hi,

I need a Java script which disables text field for certain radio button selection.
For example,(In our below code)
If any of the first 4 selections (1 MONTH SALES , 1 MONTH QTY , 2 MONTHS SALES, 2 MONTHS QTY) is selected then only the bottom 2 text fields (YEAR RANGE , YEAR RANGE 2 ) must be disabled.
If any of the last 2 fields is selected (ANNUAL SALES , ANNUAL QTY) then no text field is disabled.

Thanks!


<html>
 
 
<body>
<td>
               <table border=0 cellpadding=0 cellspacing=0 width=100%>
                 
               <tr><td class=tbl_header><a href="#" style="-decoration:nonecolor:FF6600" title="SALES OR QUANTITY">SALES</a></td></tr>
                 
 
 
                <tr><td>
               <input type="radio" value="1mnth_rev" name="sh_actual" checked>1 MONTH SALES
                 
                </td></tr>
                <tr><td>
                <input type="radio" value="1mnth_vol" name="sh_actual">1 MONTH QTY
                 
                </td></tr>
                <tr><td>
                <input type="radio" value="2mnth_rev" name="sh_actual">2 MONTHS SALES
                 
                </td></tr>
                <tr><td>
                <input type="radio" value="2mnth_vol" name="sh_actual">2 MONTHS QTY
                 
                </td></tr>
                <tr><td>
                <input type="radio" value="ann_rev" name="sh_actual">ANNUAL SALES
                 
                </td></tr>
                <tr><td>
                <input type="radio" value="ann_vol" name="sh_actual">ANNUAL QTY
                 
                </td></tr>
                <tr><td>&nbsp&nbsp</td></tr>
                <tr><td>&nbsp&nbsp</td></tr>
                <tr><td>&nbsp&nbsp</td></tr>
                <tr><td>&nbsp&nbsp</td></tr>
                <tr><td>&nbsp&nbsp</td></tr>
                </table>
 
 
 
 
                </td><td>
                <table border=0 cellpadding=0 cellspacing=0 width=100%>
                 
                <tr><td class=tbl_header colspan=2><A href="#" style="-decoration:nonecolor:FF6600" title="RANGE">RANGE MONTH</A></td></tr>
                 
                <tr><td>1 MONTH
                </td><td>
                <input type= size=10 name="act_one_mnth" value=>
                 
                </td></tr>
                <tr><td>2 MONTH
                </td><td>
                <input type= size=10 name="act_two_mnth" value=>
                 
                </td></tr>
                <tr><td class=tbl_header colspan=2><a href="#" style="-decoration:nonecolor:FF6600" title="ANNUAL RANGE">RANGE YEARLY</a></td></tr>
                 
                <tr><td>YEAR RANGE
                </td><td>
                <input type= size=10 name="act_one_yr" value=>
                 
                </td></tr>
                <tr><td>YEAR RANGE 2
                </td><td>
                <input type= size=10 name="act_two_yr" value=>
                 
                </td></tr>
                </table>
 
 
                </td></tr>
				
</form>
</body>
</html>

Open in new window

0
Comment
Question by:AyooshJ
  • 2
3 Comments
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24319681
Something like this perhaps?
<html>
<head>
<title></title>
</head>
<script type='text/javascript'>
  function check( obj ) {
    var actual = document.getElementsByName( 'sh_actual' )
    for ( var i = 0; i < actual.length; i++ ) {
      if ( obj == actual[ i ] ) {
        var annual = 'act_one_yr,act_two_yr'.split( ',' )
        for ( var j = 0; j < annual.length; j++ ) {
          var ann = document.getElementsByName( annual[ j ] )[ 0 ]
          if ( i < 5 ) {
            ann.setAttribute( 'disabled', 'true' )
          } else {
            ann.removeAttribute( 'disabled' )
          }
        }
      }
    }
  }
</script>
<body>
 
  <table border=0 cellpadding=0 cellspacing=0 width=100%>
    <tr>
      <td class=tbl_header>
        <a href="#" style="-decoration:nonecolor:FF6600" title="SALES OR QUANTITY">SALES</a>
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="1mnth_rev" name="sh_actual" checked onclick='check(this)'>1 MONTH SALES
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="1mnth_vol" name="sh_actual" onclick='check(this)'>1 MONTH QTY
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="2mnth_rev" name="sh_actual" onclick='check(this)'>2 MONTHS SALES
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="2mnth_vol" name="sh_actual" onclick='check(this)'>2 MONTHS QTY
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="ann_rev" name="sh_actual" onclick='check(this)'>ANNUAL SALES
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="radio" value="ann_vol" name="sh_actual" onclick='check(this)'>ANNUAL QTY
      </td>
    </tr>
 
    <tr><td>&nbsp&nbsp</td></tr>
    <tr><td>&nbsp&nbsp</td></tr>
    <tr><td>&nbsp&nbsp</td></tr>
    <tr><td>&nbsp&nbsp</td></tr>
    <tr><td>&nbsp&nbsp</td></tr>
  </table>
 
  <table border=0 cellpadding=0 cellspacing=0 width=100%>
    <tr>
      <td class=tbl_header colspan=2>
        <a href="#" style="-decoration:nonecolor:FF6600" title="RANGE">RANGE MONTH</a>
      </td>
    </tr>
 
    <tr>
      <td>1 MONTH</td>
      <td>
        <input type= size=10 name="act_one_mnth" value=>
      </td>
    </tr>
 
    <tr>
      <td>2 MONTH</td>
      <td>
        <input type= size=10 name="act_two_mnth" value=>
      </td>
    </tr>
 
    <tr>
      <td class=tbl_header colspan=2>
        <a href="#" style="-decoration:nonecolor:FF6600" title="ANNUAL RANGE">RANGE YEARLY</a>
      </td>
    </tr>
 
    <tr>
      <td>YEAR RANGE</td>
      <td><input type= size=10 name="act_one_yr" value='' disabled></td>
    </tr>
 
    <tr>
      <td>YEAR RANGE 2</td>
      <td><input type= size=10 name="act_two_yr" value='' disabled></td>
    </tr>
  </table>
 
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:AyooshJ
ID: 24320274
Awesome HonorGod Thanks!
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24321530
Thank you so much for the kind words, the grade & the points.

Good luck & have a great day
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question