html – Disable a field after selection-ThrowExceptions

Exception or error:

In this piece of code we need to disable Department field when APPROVED is selected in status(above field) and should be active when CLARIFICATIONS is selected it must be enabled. Please try helping us !

<form name="index" action="Director">
    <table border="0"  style="width:300px">
        <tbody bgcolor>
            <p> Date: <%= df.format(new java.util.Date()) %> </p>
            <tr>
                <td height="40"><font color="Blue">Branch:</td>
                <td>

                    <select name="dbranch" id="dbranch" >
                        <option value="Select">Select</option>
                        <option value="Kakinada">Kakinada</option>
                        <option value="Vishakapatnam">Vishakapatnam</option>
                        <option value="Tirupathi">Tirupathi</option>
                        <option value="Vijayawada">Vijayawada</option>
                        <option value="Warangal">Warangal</option>
                        <option value="Hyderabad">Hyderabad</option>
                    </select>
                </td>
            </tr>                                
            <tr>
                <td height="40"><font color="Blue">Doc id :</td>
                <td>
                <select id="inw_id" name="inw_id">
                <option value='0'>Select Doc ID</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Status:   </td>
                <td>
                    <select name="status" id="status" >
                        <option value="">Status</option>
                        <option value="Approved">Approved</option>
                        <option value="Clarifications">Clarifications</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Department:   </td>
                <td>
                    <select name="dept" id="dept" >
                        <option value=""> </option>
                        <option value="Admin">Admin</option>
                        <option value="Accounts">Accounts</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <tr><td><td align="right"><input name="submit" type="submit" value="Submit"style="background-color:LightBlue;margin-left:15px;height: 40px;width: 100px; margin-right: -30px;"></td></td></tr>
</form>

We tried writing a function, but it did not work 🙁

function doenable() {
    if(document.getElementById("status")!="null") {
        document.getElementById("department").disabled=false;
    }
}
How to solve:

If you want plain javascript solution try the following.

<html>

<head>
  <script type='text/javascript'>
    function change(theStatus) {
      if (theStatus.value === "Approved") {
        document.getElementById("dept").disabled = true;
      } else {
        document.getElementById("dept").disabled = false;
      }
    }
  </script>
</head>

<body>
  <select name="status" id="status" onchange="change(this)">
    <option value="">Status</option>
    <option value="Approved">Approved</option>
    <option value="Clarifications">Clarifications</option>
  </select>
  <select name="dept" id="dept">
    <option value=""></option>
    <option value="Admin">Admin</option>
    <option value="Accounts">Accounts</option>
    <option value="Other">Other</option>
  </select>
</body>

</html>

###

try to set onchange function in select field.
Try to do this:

<select name="status" id="status" onchange="doenable()" >
  <option value="">Status</option>
  <option value="Approved">Approved</option>
  <option value="Clarifications">Clarifications</option>
</select>

and your javascript function:

function doenable() {
  if(document.getElementById("status").value != "" {
    document.getElementById("department").enabled = false;
  } else {
    document.getElementById("department").enabled = true;
  }
}

If I were you, I would use jQuery, is easier and better than common js.

###

I rewrote your code.
Here, worked. Try to do this:

JS

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $().ready(function(){                
      $('#dept').prop('disabled', true);
    });

    function doenable(dept_value) {
      alert(dept_value);
      if(dept_value == '') {
        $('#dept').prop('disabled', true);
      } else {
        $('#dept').prop('disabled', false);
      }
    }
  </script>

HTML

<form name="index" action="Director">
    <table border="0"  style="width:300px">
        <tbody bgcolor>

            <tr>
                <td height="40"><font color="Blue">Branch:</td>
                <td>

                    <select name="dbranch" id="dbranch" >
                        <option value="Select">Select</option>
                        <option value="Kakinada">Kakinada</option>
                        <option value="Vishakapatnam">Vishakapatnam</option>
                        <option value="Tirupathi">Tirupathi</option>
                        <option value="Vijayawada">Vijayawada</option>
                        <option value="Warangal">Warangal</option>
                        <option value="Hyderabad">Hyderabad</option>
                    </select>
                </td>
            </tr>                                
            <tr>
                <td height="40"><font color="Blue">Doc id :</td>
                <td>
                <select id="inw_id" name="inw_id">
                <option value='0'>Select Doc ID</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Status:   </td>
                <td>
                    <select name="status" id="status" onchange="doenable(this.value)">
                        <option value="">Status</option>
                        <option value="Approved">Approved</option>
                        <option value="Clarifications">Clarifications</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Department:   </td>
                <td>
                    <select name="dept" id="dept" >
                        <option value=""> </option>
                        <option value="Admin">Admin</option>
                        <option value="Accounts">Accounts</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <tr><td><td align="right"><input name="submit" type="submit" value="Submit"style="background-color:LightBlue;margin-left:15px;height: 40px;width: 100px; margin-right: -30px;"></td></td></tr>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *