steveweems
asked on
fields set to display:block with javascript go back to default of display:none when browser back button is used.
I have table rows that are set to display:none by default. Based on the users requests, they are set to display:block during user input. After submitting the data to the next page, If I use the Browser Back Button to make changes to the original form, the data is all retained on the original forms history, but the table rows return to their original state of display:none.
How can I get the "display" attribute in browser history so that when the Back Button is selected after the form is sumitted the table rows are in the same state as when the page was submitted?.
How can I get the "display" attribute in browser history so that when the Back Button is selected after the form is sumitted the table rows are in the same state as when the page was submitted?.
<script language="JavaScript">
<!--
//this function will display the next berry species option if the one above it has been selected, otherwise the fields do not display.
function anotherSpecie(n) {
var showRow = (navigator.appName.indexOf("Internet Explorer") != -1)?"block":"table-row";
switch(n){
case 1:
if (document.fmWorksheet.species_id[4].value != 0)
{document.getElementById('berry2').style.display = showRow;}
else
{document.getElementById('berry2').style.display = 'none';}
case 2:
if (document.fmWorksheet.species_id[5].value != 0)
{document.getElementById('berry3').style.display = showRow;}
else
{document.getElementById('berry3').style.display = 'none';}
case 3:
if (document.fmWorksheet.species_id[6].value != 0)
{document.getElementById('berry4').style.display = showRow;}
else
{document.getElementById('berry4').style.display = 'none';}
case 4:
if (document.fmWorksheet.species_id[7].value != 0)
{document.getElementById('berry5').style.display = showRow;}
else
{document.getElementById('berry5').style.display = 'none';}
case 5:
if (document.fmWorksheet.species_id[8].value != 0)
{document.getElementById('berry6').style.display = showRow;}
else
{document.getElementById('berry6').style.display = 'none';}
}
}
//-->
</script>
This is an examplo of of the rows default condition:
(I am also using Coldfusion with this page.)
<tr style="display:none;padding:0 2px 0 2px;" id="berry2">
<td ><cfinput name="PRODUCT_ID" type="hidden" value="#products.PRODUCT_ID#">
<cfinput name="species_description" type="hidden" value="0"> </td>
<td>
<div align="right"><span class="small">(2)</span>
<select name="species_id" onChange="anotherSpecie(2)" id="purchase2">
<option value="0">Select a berry specie</option>
<cfloop query="berries">
<option value="#species_id#">#common_name#</option>
</cfloop>
</select>
</div></td>
<td>#MAX_UNITS# #UNITS# Total </td>
<td><div align="center">
<cfinput name="units_purchased" type="text" size="7" maxlength="6" value="0" range="0,75" validate="range" validateat="onblur" message="You have exeeded the maximum number of units that can be purchased for this item." onChange="Calc(#products.max_units#,#products.cost_per_unit#,this)" required="yes" >
</div> </td>
<td>$#COST_PER_UNIT#/#UNITS#</td>
<td>$<cfinput name="paid_per_product" type="text" size="10" maxlength="10" value="0" required="yes" message="A value is required in every field. Use a 0 if there is no value." readonly="yes" style="background-color:##CCCCCC" tabindex="-1"></td>
</tr>
This is not something you can controle. If you need to control this behaviour you need to store status (f.ex. in session) and then check this when styling rows.
ASKER
Do you have an example of what that would look like?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.