CODEWITHSUNDEEP
javascripthtmljsp
Suhas
Suhas

Reputation: 57

How to show form input fields based on select value in html/JavaScript?

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"/>

Upvotes: 2

Views: 8939

Answers (3)

vusiliyK
vusiliyK

Reputation: 33

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>

Upvotes: 1

Suhas
Suhas

Reputation: 57

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>

Upvotes: 0

Void
Void

Reputation: 172

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.

Upvotes: 1

Related Questions