3 Replies Latest reply: Feb 8, 2008 5:20 AM by Newsgroup_User RSS

    Disabling Fields based on radio button

    trojnfn Community Member
      I have three radio buttons and one input field. The input field corresopnds to button 2 only, and buttons 1 and 3 are just by themselves. What I want to do is if buttons 1 or 3 are selected, then the input field for button two should be disabled/grayed out. If they change their mind and check button 2 instead, then it should be enabled/white out, to accept an entry. What is happening is when I check buttons 1 or 3, the input field does become gray. But when I click on button 2, the input field remains gray/disabeld, and I am not sure how to enable it again. I think it is something simple but I just cannot see it. Please help, thanks

      Here is my javascript below, and the radio buttons :

      <script type="text/javascript">
      function enableFields(fieldList) {
      var fieldArray = fieldList.split(',');

      // disable all fields
      for (var i=1; i<=1; i++) {
      document.getElementById('input1').value = ""; // clear out the value first (optional)
      document.getElementById('input1').disabled = true;
      document.getElementById('input1').style.backgroundColor="gray";
      }

      // enable the fields passed to the function
      for (var i=0; i<fieldArray.length; i++) {
      document.getElementById('input' + fieldArray ).disabled = false;
      document.getElementById('input' + fieldArray
      ).style.backgroundColor="white";
      }
      }
      </script>

      <td valign="top">
      <input type="radio" name="quantity_type" value="None Given">
      None Given<br>
      <input type="radio" name="quantity_type" value="Single Lot" onclick="enableFields('1');">
      Single Lot with Quantity :
      <input type="text" name="quantity" id="input1" disabled="true"><br>
      <input type="radio" name="quantity_type" value="Multiple Lots">
      Multiple Lots (Specifiy quantities in Additional Information Box)
      </td>
        • 1. Re: Disabling Fields based on radio button
          Newsgroup_User Community Member
          <form action="" method="get" name="myForm" id="myForm">
          <input type="radio" name="quantity_type" value="None Given"
          onclick="document.myForm.quantity.disabled = true">
          <input type="radio" name="quantity_type" value="Single Lot"
          onclick="document.myForm.quantity.disabled = false">
          <input type="text" name="quantity" id="input1" disabled="disabled">
          <input type="radio" name="quantity_type" value="Multiple Lots"
          onclick="document.myForm.quantity.disabled = true">
          </form>

          no need for the <script> block
          --
          Ken Ford
          Adobe Community Expert - Dreamweaver
          Fordwebs, LLC
          http://www.fordwebs.com


          "trojnfn" <webforumsuser@macromedia.com> wrote in message
          news:fog6ig$kj5$1@forums.macromedia.com...
          >I have three radio buttons and one input field. The input field corresopnds
          >to
          > button 2 only, and buttons 1 and 3 are just by themselves. What I want to
          > do is
          > if buttons 1 or 3 are selected, then the input field for button two should
          > be
          > disabled/grayed out. If they change their mind and check button 2 instead,
          > then
          > it should be enabled/white out, to accept an entry. What is happening is
          > when I
          > check buttons 1 or 3, the input field does become gray. But when I click
          > on
          > button 2, the input field remains gray/disabeld, and I am not sure how to
          > enable it again. I think it is something simple but I just cannot see it.
          > Please help, thanks Here is my javascript below, and the radio buttons :
          > <script type='text/javascript'> function enableFields(fieldList) { var
          > fieldArray = fieldList.split(','); // disable all fields for (var i=1;
          > i<=1; i++) { document.getElementById('input1').value = ''; // clear out
          > the value first (optional) document.getElementById('input1').disabled =
          > true; document.getElementById('input1').style.backgroundColor='gray'; }
          > // enable the fields passed to the function for (var i=0;
          > i<fieldArray.length; i++) { document.getElementById('input' +
          > fieldArray ).disabled = false; document.getElementById('input' +
          > fieldArray
          ).style.backgroundColor='white'; } } </script> <td
          > valign='top'> <input type='radio' name='quantity_type' value='None Given'>
          > None
          > Given<br> <input type='radio' name='quantity_type' value='Single Lot'
          > onclick='enableFields('1');'> Single Lot with Quantity : <input
          > type='text'
          > name='quantity' id='input1' disabled='true'><br> <input type='radio'
          > name='quantity_type' value='Multiple Lots'> Multiple Lots (Specifiy
          > quantities
          > in Additional Information Box) </td>
          >

          • 2. Re: Disabling Fields based on radio button
            trojnfn Community Member
            Hello Ken,

            Thanks for your help. Your method works great and does what I want it to do.

            With your method, is there any way to actually gray out the input box to disable it ? It does not matter to me because it works, but the user wants to disable the input by making it gray, so that there will be absolutely no confusion.

            Will that involve the javascript ?

            Thanks for your help.
            • 3. Re: Disabling Fields based on radio button
              Newsgroup_User Community Member
              <script type="text/javascript">
              <!--
              function doDisable() {
              document.myForm.quantity.style.backgroundColor = '#666666';
              document.myForm.quantity.disabled = true;
              }
              function doEnable() {
              document.myForm.quantity.style.backgroundColor = '#FFFFFF';
              document.myForm.quantity.disabled = false;
              }
              //-->
              </script>
              <form action="" method="get" name="myForm" id="myForm">
              <input type="radio" name="quantity_type" value="None Given"
              onclick="doDisable()">
              <input type="radio" name="quantity_type" value="Single Lot"
              onclick="doEnable()">
              <input type="text" name="quantity" id="quantity" disabled="disabled"
              style="background-color:#666666">
              <input type="radio" name="quantity_type" value="Multiple Lots"
              onclick="doDisable()">
              </form>

              BTW you need to change id="input1" to id="quantity" on the text input,
              missed that before.

              --
              Ken Ford
              Adobe Community Expert - Dreamweaver
              Fordwebs, LLC
              http://www.fordwebs.com


              "trojnfn" <webforumsuser@macromedia.com> wrote in message
              news:fogklv$4uv$1@forums.macromedia.com...
              > Hello Ken,
              >
              > Thanks for your help. Your method works great and does what I want it to
              > do.
              >
              > With your method, is there any way to actually gray out the input box to
              > disable it ? It does not matter to me because it works, but the user wants
              > to
              > disable the input by making it gray, so that there will be absolutely no
              > confusion.
              >
              > Will that involve the javascript ?
              >
              > Thanks for your help.
              >