How to show form input fields based on select value in htmlJavaScript? - Stack Overflow

admin管理员组

文章数量:1420213

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

Share Improve this question Follow edited May 9, 2017 at 6:06 Vikrant 5,0461818 gold badges5151 silver badges7575 bronze badges asked May 6, 2017 at 0:36 SuhasSuhas 5711 silver badge1010 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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>

本文标签： How to show form input fields based on select value in htmlJavaScriptStack Overflow