How to have text fields hidden by default on page load until the relevant drop down option has been selected?
Question
How to keep text fields to stay hidden by default when the page is loaded? But, show up when a relevant drop down option is selected. The javascript works to some extent. But, I want to keep the input fields hidden initially.
<script language="javascript" type="text/javascript">
function toggleMe(val)
{
var designation = document.getElementById('designation');
var organization = document.getElementById('organization');
var lavelOne = document.getElementById('lavel-one');
var lavelTwo = document.getElementById('lavel-two');
if(val=='Trainee')
{
designation.style.display = "none";
organization.style.display = "none";
lavelOne.style.display = "none";
lavelTwo.style.display = "none";
}
else
{
designation.style.display = "block";
organization.style.display = "block";
lavelOne.style.display = "block";
lavelTwo.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<table width="100%" border="0">
<tr>
<td><select name="select" onchange="toggleMe(this.value)">
<option value="0">Select any one</option>
<option value="Trainee">Trainee</option>
<option value="Product">Product</option>
</select></td>
<td> </td>
</tr>
<tr id="lavel-one">
<td>Enter Designation</td>
<td> </td>
</tr>
<tr>
<td><input name="designation" type="text" id="designation" /></td>
<td> </td>
</tr>
<tr id="lavel-two">
<td>Enter Organization</td>
<td> </td>
</tr>
<tr>
<td><input name="organization" type="text" id="organization" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
1 answers
solution1
1 ACCPTED 2021-04-02 16:23:07
You can use CSS to hide the elements:
#designation, #lavel-one, #organization, #lavel-two{
display: none;
}
I think you should also hide the elements when val=='0' .
#designation, #lavel-one, #organization, #lavel-two{ display: none; }
<script language="javascript" type="text/javascript"> function toggleMe(val) { var designation = document.getElementById('designation'); var organization = document.getElementById('organization'); var lavelOne = document.getElementById('lavel-one'); var lavelTwo = document.getElementById('lavel-two'); console.log(val); if(val=='Trainee' || val=='0') { designation.style.display = "none"; organization.style.display = "none"; lavelOne.style.display = "none"; lavelTwo.style.display = "none"; } else { designation.style.display = "block"; organization.style.display = "block"; lavelOne.style.display = "block"; lavelTwo.style.display = "block"; } } </script> </head> <body> <form> <table width="100%" border="0"> <tr> <td><select name="select" onchange="toggleMe(this.value)"> <option value="0">Select any one</option> <option value="Trainee">Trainee</option> <option value="Product">Product</option> </select></td> <td> </td> </tr> <tr id="lavel-one"> <td>Enter Designation</td> <td> </td> </tr> <tr> <td><input name="designation" type="text" id="designation" /></td> <td> </td> </tr> <tr id="lavel-two"> <td>Enter Organization</td> <td> </td> </tr> <tr> <td><input name="organization" type="text" id="organization" /></td> <td> </td> </tr> </table> </form> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Verify that an Option has been Selected in a Drop Down Box
How to display something after an option from a drop down list has been selected using javascript?
Change Text Field Once Drop Down Has Been Selected (Multiple forms on 1 page)
How to set value for hidden field based on selected option in drop down?
How do I get the drop down section hidden on page load?
How to display a chunk of text specific to the drop-down option selected?
How to hide/show text fields based on options selected in a drop down?
How to load the value of a drop down to a text box when selected
How to load data in text fields dynamically when selecting an option from drop down which is populated from database? Laravel Ajax
grey out a field until a certain drop down option is selected
Related Tags