oxydayflokild
New Member
Sorry if this question has been asked before. I had a simple HTML table and added some hide/unhide features throughjQuery. The table worked fine in Chrome 24.0.1312.52 m and IE8+. However, when I refreshed the webpage in Firefox 15.0.1, previouslyfilled table would not be reset. Has anyone had this experiencebefore? Do I need to add something to let jQuery reset the form?Below is my code and a link to jsfiddle. Thanks for any suggestions!HTML:<table> <tr> <th> <label for="id_application">Application:</label> </th> <td> <select name="application" id="id_application"> <option value="">Make a selection</option> <option vhttp://stackoverflow.com/questions/14489754/alue="a">Aerial</option> <option value="http://stackoverflow.com/questions/14489754/b">Ground</option> <option value="http://stackoverflow.com/questions/14489754/c">Orchard/Airblast</option> </select> </td> </tr> <tr> <th> <label for="id_boom_height">Boom height:</label> </th> <td> <select name="boom_height" id="id_boom_height"> <option value="">Make a selection</option> <option value="http://stackoverflow.com/questions/14489754/1">Low</option> <option value="http://stackoverflow.com/questions/14489754/2">High</option> </select> </td> </tr> <tr> <th> <label for="id_orchard_type">Orchard type:</label> </th> <td> <select name="orchard_type" id="id_orchard_type"> <option value="">Make a selection</option> <option value="http://stackoverflow.com/questions/14489754/1">Vineyard in leaf</option> <option value="http://stackoverflow.com/questions/14489754/2">Orchard or dormant vineyard</option> </select> </td> </tr></table>JS $(document).ready(function () { $('#id_boom_height').closest('tr').hide(); $('#id_orchard_type').closest('tr').hide(); $('#id_application').change(function () { $('#id_boom_height').closest('tr').hide(); $('#id_orchard_type').closest('tr').hide(); if ($(this).val() == "b") { $('#id_boom_height').closest('tr').show(); $('#id_orchard_type').closest('tr').hide(); } else if ($(this).val() == "a") { $('#id_boom_height').closest('tr').hide(); $('#id_orchard_type').closest('tr').hide(); } else if ($(this).val() == "c") { $('#id_boom_height').closest('tr').hide(); $('#id_orchard_type').closest('tr').show(); } }); });Update:Thanks for the help from Hanlet Esca?o. I added a reset button to the table and bind it to the page refresh. As a result, when I refresh pages in Firefox, I am able to change the table to its default condition.However, when I click the reset button, the only the form's contents are reset, but the structure of it. Here is the example. I appreciate if anyone could help out of it. Thanks!