Solved

JavaScript- Radio Button and Text Field events

Posted on 2009-05-06
3
1,439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
This article discusses how to create an extensible mechanism for linked drop downs.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

733 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