Form data re-appears on pressing back button in browser - html

I have a form on a webpage that submits post information to the server. All is working good except when i submit the form and press back button the data in the form re-appears instead of going to the previous web page. How can I prevent this? Also I want the previous web page to be reloaded again when i press back button.
Thank you.

Related

Unexpected form submit

I faced with a strange problem. I write ASP.NET web application.
I have form tag on the aspx page and submit in the form. When I click on the submit form's data are posted. It is ok. But if I close the page right after submit and then re-open it with Main Menu -> Recent Tabs (I use Google Chrome) the form's submit fires once again and data are posted too. I would like to avoid this behavior because repeated posting data to server is unwelcome and unexpected. It happens after select Recent Tabs only (when I prress Ctrl+Shift+T it does not happen) How could I prevent it? Thanks in advance
Check if it's a PostBack. If it is a PostBack then return.

When are forms autofilled in Chrome?

I'm confused about how Chrome decides what forms to autofill. By autofill I mean the inputs are highlighted in yellow and already completely filled in when you land on the page (see picture below). I do not mean autocomplete which is where the input is blank and you get a suggestion only when you start typing in it.
Here's the autofill rules as I understand them:
If your form is located on its own url, e.g., http://mysite.com/login
Your form is present on page load and is NOT loaded via ajax
Comparing my site with Dropbox's we both have a login page: http://localhost/login vs. https://www.dropbox.com/login which satisfies rule #1. The login form gets autofilled for both of us.
My problem is with rule #2. On Dropbox's homepage, www.dropbox.com, they have a "sign in" modal (see picture below) that gets autofilled. On my homepage, http://localhost, I have an identical modal which does NOT ever get autofilled.
I can't figure what the deal is here, can someone chime in? Is it just a localhost vs. real URL issue? If so, how do you explain why http://localhost/login gets autofilled?
When you log into a new site chrome will drop down its notification bar at the top and ask you if you want to save the password, if you tell it "Never" it wont ask again and it wont ever autofill
To get form fields to autofill like street, address, etc, a good answer by kmote
How to trigger Autofill in Google Chrome?,

Make link using submit button

Can I link one page to another page using submit button?
It sends all the wrong signals to the user, but:
<form action="some-uri"><div><input type="submit"></div></form>
The problem with using a submit form is that the next page will think that it has to deal with a binary request, which you can't do if using an upload form.
So you are better using a image button (can make it look like a submit button) or using JavaScript...
Open in a new window:
onClick="window.open('page.html');"
Open in the same window:
onClick="document.location.href = ('page.html');"

Error with IE and form data when clicking back

Say if I am on page 1 , I enter my form data and go to page 2 , But wait I forgot something and I need to go back. FireFox and Safari ask me if I want to resend my form data.
But IE being IE it just goes back and does not show the page.
Is there away around this when I click back it keeps the data and the page appears.
Sorry I cannot give a link but the process for u to go through on my site to get to this part would take you a while.
My suspicion is that your talking about a wizard form. Where each part of the form is a page and you can go backwards and forwards through the pages.
the back button has always caused problems for developers on the web and this is probably the most annoying.
You can stop the IE back button issue by redirecting on the server to the next page when you receive a form post rather than just delivering the form back to the browser. Doing this means that the browser considers each page to have been a get and stops asking you if you want to resubmit the form.
to do this simply make each form post to itself and then return a redirect to the next page of the wizard. I'd give examples but I'm not sure what language you are using on the server.
the other alternative is to use javascript to create a wizard from your form see this jQuery wizard form demo.
create a new back button besides the submit button and when a user clicks on either one you call a javascript function which modifies the form action either to the next page or the previous page.

Pressing the back button does not trigger <body>'s OnLoad

My checkout cart displays (1) an animation for "Processing Order..." after the 's been (2) submitted and the card is being processed in a php script. However, there's a bug triggered when the user has reached the "order accepted" page, and pressed the back button. The "Processing Order..." animation is still displayed.
(1) The processing display is shown like:
<div style="position:absolute;display:none;" id="animation">
<img src="animation.gif"/>
</div>
(2) When the button is submitted, the javascript used:
onClick="document.getElementById('animation').style.display='block';
document.the_form.submit();"
So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.
When the user clicks back, we should expect a page without the animation. But, onLoad isn't triggered, and the last state of the animation (displayed) is saved.
Any idea how to remove the animation when the user returns to the page?
Inspired by Adam A's comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn't shown.
One way to achieve this is adding the hiding code to HTML body's onunload event.
<body onunload="document.getElementById('animation').style.display='none';">
In most modern browsers, clicking back doesn't reload the page, it just displays it from memory as it last remembered it (as this is likely to be the desired behaviour).
In my limited experience of UI design, I'm not sure why you would want users to click the 'back' button after submitting an order, instead you should provide a link that takes them forward to the next task they may wish to complete, or, forward them onto a new page that has useful tasks and simply displays a message somewhere that says "Thanks, your order is accepted".