I have an asp page that accepts payment information from user. I use the same page to confirm the payment information by hiding the div that has the input boxes & copying the credit card information in a bunch of spans in another div & showing this 2nd div with a submit button.
Here is how the code looks like:
<div id="div1" style="display:block">
display input boxes for entering credit card information
display next button
<div id="div2" style="display:none">
onclick of next button in div1, values are copied in spans here & div1 is hidden and div2 (this div) is made visible
display spans with credit card information
display previous button (just hides this div and displays div1)
display submit button (will submit the credit card information to paymentprocess.asp)
If credit card charge was successful, then everything works fine. But if the credit card was declined, I display an error on this page & provide a "Back" button for user to go back & rectify the input they provided.
It all works fine in IE. The user is taken to the paymentdetails.asp & div1 is displayed (so that user can make the changes) & div2 is hidden. But in Firefox, div1 is hidden and div2 is displayed (because the user submitted the form when div2 was displayed). This is not what I would like to have. I would want that div1 is displayed & div2 is hidden when the page is displayed from cache.
I tried using history.go(-1) instead of history.back(), but that did not help.
One interesting thing I noticed in Firefox is that when the credit card was diclined & instead of using my "Back" button, if I use browser's back button, Firefox displayed the paymentdetails.asp correctly with div1 displayed & div2 hidden.
Is it a firefox bug in their implementation of history object? Is their any other way I can fix this?
Any help is greatly appreciated!