Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help on disable/enable textfield

    <form name="inputForm">
    <body>
    <table>
    <tr>
    <td><input name="inputType" type="radio" value=""></td>
    <td>Account Num</td>
    <td><input name="txtAccNum" type="text"></td>
    </tr>

    <tr>
    <td><input name="inputType" type="radio" value=""></td>
    <td>Service Num</td>
    <td><input name="txtSrvNum" type="text"></td>
    </tr>
    </table>
    </form>

    helo...i need help...i want to disable all the textfield..when user check the radio button(let say the above one), the above textfield (txtAccNum) will be enable..im new to javascript.hope u all can help me..thanxx

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function init(){
      //disable text fields
      var f = document.inputForm;
      f.txtAccNum.disabled = true;
      f.txtSrvNum.disabled = true;
    }
    
    function enableDisable(oFrm, enabledFldName, disabledFldNames){
      oFrm.elements[enabledFldName].disabled = false;
      if (disabledFldNames instanceof Array){ //multiple field names
        var len = disabledFldNames.length;
        for (var i=0; i<len; i++){
            oFrm.elements[disabledFldNames[i]].disabled = true;
        }
      }
      else{ //single field name
        oFrm.elements[disabledFldNames].disabled = true;
      }
    }
    </script>
    </head>
    <body>
    <form name="inputForm">
    <body onload="init();">
    <table>
    <tr>
    <td><input name="inputType" id="acct" type="radio" value="1" onclick="enableDisable(this.form, 'txtAccNum', 'txtSrvNum')" /></td>
    <td><label for="acct">Account Num</label></td>
    <td><input name="txtAccNum" type="text" /></td>
    </tr>
    <tr>
    <td><input name="inputType" id="srvc" type="radio" value="2" onclick="enableDisable(this.form, 'txtSrvNum', 'txtAccNum')" /></td>
    <td><label for="srvc">Service Num</label></td>
    <td><input name="txtSrvNum" type="text" /></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    You can also passed an array of field names to be disabled for the 2nd parameter of enableDisable() function. You will need it if you have any number of additional radio buttons with corresponding textboxes.

    Code:
    <inputs name="inputType" type="radio" value="3" onclick="enableDisable(this.form, 'txt3', ['txtAccNum', 'txtSrvNum'])" />
    <input name="txt3" type="text" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,316
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Try this (works with two radio/textboxes):-

    <form name="inputForm">
    <body>
    <table>
    <tr>
    <td><input name="inputType" type="radio" value="" onclick="javascript:document.inputForm.txtAccNum.disabled=false; document.inputForm.txtSrvNum.disabled=true; document.inputForm.txtSrvNum.value='';" ></td>
    <td>Account Num</td>
    <td><input name="txtAccNum" type="text"></td>
    </tr>

    <tr>
    <td><input name="inputType" type="radio" value="" onclick="javascript:document.inputForm.txtAccNum.disabled=true; document.inputForm.txtSrvNum.disabled=false; document.inputForm.txtAccNum.value='';">
    </td>
    <td>Service Num</td>
    <td><input name="txtSrvNum" type="text"></td>
    </tr>
    </table>
    </form>

    Remember that only checked radio buttons have their name/value pairs sent when the form is submitted.
    Last edited by Philip M; 10-20-2005 at 09:49 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •