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

Question

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

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

Void · Accepted Answer · 2017-05-06 00:57:29Z

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.

vusiliyK · Accepted Answer · 2017-05-06 01:35:21Z

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>

Suhas · Accepted Answer · 2017-05-06 01:24:21Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related