Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

fields  set to display:block with javascript go back to default of display:none when browser back button is used.

Posted on 2008-10-10
3
975 Views
Last Modified: 2013-11-19
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?.
<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">      &nbsp;</td>
    <td>
    <div align="right"><span class="small">(2)</span>&nbsp;
      <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#&nbsp;#UNITS#&nbsp;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>

Open in new window

0
Comment
Question by:steveweems
3 Comments
 
LVL 7

Expert Comment

by:bluV11t
ID: 22690885
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.
0
 

Author Comment

by:steveweems
ID: 22690961
Do you have an example of what that would look like?
0
 
LVL 7

Accepted Solution

by:
ASPSQLServerCOM earned 125 total points
ID: 22704748
some thing you can use like
***** Based on the users requests, they are set to display:block during user input.
write this detail in to cookie
then use javascript window onload function (http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript
http://bytes.com/forum/thread511470.html) - as said it will be for IE 6.0 and above but you can varify it

*****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.

now when user click on the browser back button the original page window.onload event gets fired so in that load the cookie value and set your row show hide
you need to manipulate with this to get the required result

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question