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 Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I program a select option to enable a field?

    I have a telephone input on my form. It is an optional input for users. The prompt begins with the user having to select a phone type from a select menu, and then continue to the text fields to enter the digits. I would like to have the text fields disabled unless any of the types of phone are selected, but not if a type isn't selected. Here's my HTML code so far:

    Code:
    <select name="phoneType1">
    	<option value="" selected="selected">Type...</option>
    	<option value="Home">Home</option>
    	<option value="Work">Office</option>
    	<option value="Cell">Cell</option>
    </select> 
    	(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) - 
    	<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> - 
    	<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/> 
    	&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>
    I know that all I need to do to disable the text fields is to type in "disabled" before the name of the field. But, I don't know how to enable it when "Home," "Office," or "Cell" is selected. Thanks for any help.

  • #2
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's an example that may help:

    Code:
    <html>
    <head>
    <title>Activate Textboxes</title>
    <script type="text/javascript">
    function activateTextBox () {
    if (document.getElementById("r1a").checked || document.getElementById("r1b").checked) {
    document.getElementById("t2").disabled=false;
    }
    if (document.getElementById("r2a").checked || document.getElementById("r2b").checked) {
    document.getElementById("t3").disabled=false;
    }
    if (document.getElementById("r3a").checked || document.getElementById("r3b").checked) {
    document.getElementById("t4").disabled=false;
    }
    }
    </script>
    </head>
    
    <body>
    
    <form action="" method="post" name="myForm">
    <table width="100%" border="1">
    <tr>
    <td><input type="text" name="t1"></td>
    <td><p>
    <label>
    <input type="radio" name="r1" value="radio" id="r1a" onclick="activateTextBox()">
    To</label>
    <br>
    <label>
    <input type="radio" name="r1" value="radio" id="r1b" onclick="activateTextBox()">
    And</label>
    <br>
    </p></td>
    <td><input type="text" name="t2" disabled></td>
    <td><label>
    <input type="radio" name="r2" value="radio" id="r2a" onclick="activateTextBox()">
    To</label> <br> <label>
    <input type="radio" name="r2" value="radio" id="r2b" onclick="activateTextBox()">
    And</label> </td>
    <td><input type="text" name="t3" disabled></td>
    <td><label>
    <input type="radio" name="r3" value="radio" id="r3a" onclick="activateTextBox()">
    To</label> <br> <label>
    <input type="radio" name="r3" value="radio" id="r3b" onclick="activateTextBox()">
    And</label> </td>
    <td><input type="text" name="t4" disabled></td>
    </tr>
    </table>
    </form>
    
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    I have modified your code a little bit (as highlighted) and also added some script around it...
    Code:
    <select name="phoneType1" onchange="showDtls(this)">
    	<option value="" selected="selected">Type...</option>
    	<option value="Home">Home</option>
    	<option value="Work">Office</option>
    	<option value="Cell">Cell</option>
    </select> 
    <div id="phoneDtlsId">
    	(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) - 
    	<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> - 
    	<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/> 
    	&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>
    </div>
    Script for the same is ---
    Code:
    function showDtls(cmbObj) {
      var phoneDiv, txtBoxes, isDisabled, i, ele;
      phoneDiv = document.getElementById('phoneDtlsId');
      if(!phoneDiv) return;
      txtBoxes = phoneDiv.getElementsByTagName('input');
      for(i = 0; i < txtBoxes.length; i++) {
        ele = txtBoxes[i];
        if(ele.type.toLowerCase() == 'text') {
          isDisabled = (cmbObj.selectedIndex === 0);
          ele.disabled = isDisabled;
          ele.value = '';
        }
      }
    }
    showDtls(document.getElementsByName('phoneType1')[0]);
    Thanks & Regards,
    Niral Soni


  •  

    Posting Permissions

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