Solved

JavaScript- Radio Button and Text Field events

Posted on 2009-05-06
3
1,431 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
Comment Utility
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
Comment Utility
Awesome HonorGod Thanks!
0
 
LVL 41

Expert Comment

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

Good luck & have a great day
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now