How to Enable/Disable input field based on a dropdown selection. and also I should take the user data in JSP based on the selection.

<form action="../jsp/findActorbyChar.jsp">

<h3>Search by:  
<select name ="nameField"> </h3> 
            <option> Only FirstName </option>
            <option> Only LastName  </option>
            <option> Or </option>
            <option> And </option>
            </select>
<br><br>
First Name <input type="text" name="firstName"/>
Last Name <input type="text" name="lastName"/>
<br><br>
<input type="submit"/>
<input type="reset"/>

How to Enable/Disable input field based on a dropdown selection. and also I should take the user data in JSP based on the selection.

<form action="../jsp/findActorbyChar.jsp">

<h3>Search by:  
<select name ="nameField"> </h3> 
            <option> Only FirstName </option>
            <option> Only LastName  </option>
            <option> Or </option>
            <option> And </option>
            </select>
<br><br>
First Name <input type="text" name="firstName"/>
Last Name <input type="text" name="lastName"/>
<br><br>
<input type="submit"/>
<input type="reset"/>

• javascript
• html
• jsp

• By using form Id ; var form = document.getElementById('id'); nameField = form.elements.nameField; nameField.onchange = function (){} – Suhas Commented May 6, 2017 at 0:53

3 Answers 3

Modified Html as shown below:

<h3>Search by:</h3> 
<select name ="nameField" id="nameField">
    <option>Only FirstName</option>
    <option>Only LastName</option>
    <option>Or</option>
    <option>And</option>
</select>
<br><br>
First Name <input type="text" name="firstName" id="firstNameInput"/>
Last Name <input type="text" name="lastName" id="lastNameInput" />
<br><br>
<input type="submit"/>
<input type="reset"/>

Javascript code:

var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");

nameField.addEventListener("change", function(){
  //Update this to your logic...
  if(nameField.value === "And"){
    firstNameInput.disabled = true;
    lastNameInput.disabled = true;
  }
});

But I think it would be easier if using JQuery to handle DOM update.

Give your menu an id and then you can access the selected index with menu.options.selectedIndex. From there, you can add an on change handler to the menu and use switch cases to set the disabled attribute of the menu.

<h3>Search by:  
<select id="menu" name ="nameField"> </h3> 
            <option> Only FirstName </option>
            <option> Only LastName  </option>
            <option> Or </option>
            <option> And </option>
            </select>
<br><br>
First Name <input id="first" type="text" name="firstName"/>
Last Name <input id="last" type="text" name="lastName"/>
<br><br>
<input type="submit"/>
<input type="reset"/>

<script type="text/javascript">
var menu = document.getElementById('menu');
var first = document.getElementById('first');
var last = document.getElementById('last');


menu.onchange = function(){

     var enableFirst = false, enableLast = false;
    switch(menu.options.selectedIndex){
        case 0:
            enableFirst = true;
            enableLast =  false;
            break;
        case 1:
            enableFirst = false;
            enableLast =  true;
            break;
        case 2:
            /*not sure which results you want here*/
            break;
        case 3:
            /*not sure which results you want here*/
            break;
        default:
            break;

    }
    first.disabled = !enableFirst;
    last.disabled = !enableLast;


}
</script>

My code: still all the input fields are enabled enter code here

<script src="script.js">
var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");

nameField.addEventListener("change", function(){
//Update this to your logic...
<script src="script.js">
var nameField = document.getElementById("nameField");
 var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");

nameField.addEventListener("change", function(){
 //Update this to your logic...
if(nameField.value === "And"){
firstNameInput.disabled = true;
lastNameInput.disabled = true;
}

else if(nameField.value === "firstNameInput"){
firstNameInput.disabled = false;
lastNameInput.disabled = true;
}

else if(nameField.value === "lastNameInput"){
firstNameInput.disabled = true;
lastNameInput.disabled = false;
}

elseif(nameField.value === "lastNameInput"){
firstNameInput.disabled = true;
lastNameInput.disabled = true;
}

});

</script>