How to hide or unhide table rows containing form fields in a php website based on a drop down selection using jquery/ ajax?
Question
How to hide or unhide table rows containing form fields in a php website based on a drop down selection using jquery/ ajax? I am stuck on this. I used the script below but, it only hides the field leaving blank rows between the form fields. So, is there a way to also hide the respective table rows.
Thank you.
my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function toggleMe(val)
{
var designation = document.getElementById('designation');
var organization = document.getElementById('organization');
if(val=='Trainee')
{
designation.style.display = "none";
organization.style.display = "none";
}
else
{
designation.style.display = "block";
organization.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>
<td>Enter Designation</td>
<td> </td>
</tr>
<tr>
<td><input name="designation" type="text" id="designation" /></td>
<td> </td>
</tr>
<tr>
<td>Enter Organization</td>
<td> </td>
</tr>
<tr>
<td><input name="organization" type="text" id="organization" /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
1 answers
solution1
0 ACCPTED 2021-03-18 03:51:01
Try like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
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
Show/hide form fields based on a selection from a drop down menu
How to hide a drop down option based on the selection of another drop down in a form in HTML using Javascript
how to show/hide div based on drop down selection using angular?
How to hide and unhide form fields based on a radio button?
How to print the values based on drop down selection using jquery?
Use JQuery to hide and show a div based on drop down selection
jquery create and delete fields based on selection from a drop down menu
how can I change the color of a table based on selected drop down item using php ajax javascript
Using AJAX to fill form fields based on selection
Javascript / jQuery Hide fields based on Selected Drop Down item
Related Tags