I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquisition, and Type of Request which is a drop-down with 4 options.
What I am aiming for is that based on the selection made in the drop-down, the user should see a corresponding form displayed below with a table containing more input fields and text boxes.
However, I am encountering multiple issues, such as only seeing one table row instead of all selected options. It seems like I might not be tackling the problem in the right way. So, I am reaching out for assistance or guidance to steer me in the correct direction.
$(document).ready(function() {
$('select[name="select_main_table"]').change(function() {
$("#main_table tr").hide().eq(this.value-1).show();
}).change();
});
<td><label for="typeofrequest">Type of Request</label></td>
<td><select name="select_main_table">
<option value="" selected="selected"> - Choose -</option>
<option value="1">Office Move</option>
<option value="2">Office Closure</option>
<option value="3">New Office</option>
<option value="4">New Service</option>
</select> </td>
<td> </td>
</tr>
<table id="main_table">
<tr>
<td><label for="sitecontactname">Site Contact Name</label></td>
<td><input type="text" class="validate[required,custom[sitecontactname]]" name="sitecontactname" id="sitecontactname" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontacttitle">Site Contact Title</label></td>
<td><input type="text" class="validate[required,custom[sitecontacttitle]]" name="sitecontacttitle" id="sitecontacttitle" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontactemail">Site Contact Email</label></td>
<td><input type="text" class="validate[required,custom[sitecontactemail]]" name="sitecontactemail" id="sitecontactemail" value="" /></td>
<td> </td>
</tr>
<tr>
<td><label for="sitecontacttelephonenumber">Site Contact Telephone Number</label></td>
<td><input type="text" class="validate[required,custom[sitecontacttelephonenumber]]" name="sitecontacttelephonenumber" id="sitecontacttelephonenumber" value="" /></td>
<td> </td>
</tr>
</table>