[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

JavaScript- Radio Button and Text Field events

Posted on 2009-05-06
3
Medium Priority
?
1,447 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

656 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