Clearing textfields/textboxes when user clicks the browser's Back button - javascript

I have a series of textfields and textboxes that a user can fill out, then click send. If he hits the back button, I want those fields to be empty. Currently, when the user clicks back, those fields are filled with data entered before the submit.
Is there a solution for this that works in (almost) all browsers?

On the load of the page, iterate over all the inputs and set their value to an empty string. Though, really, is there a good reason to do that to your users? That's more of a browser feature for their convenience than a site feature.
$('input[type=text]').each(function(input){
input.value="";
});

Related

Back button which goes back to filled in form

Is there a way to add a Back button which reloads a form with the inputs filled in?
I have a form with some input fields and a save (submit) button. When clicking submit, if the mandatory fields aren't filled in, a new page opens with a message. If I use the browser's Back button, I receive this message:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be
properly displayed. You can send this data again, but by doing so you
will repeat any action this page previously performed. Press the
reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
So basically, it asks me to Refresh, and then confirm by clicking OK on a pop up window, after which the form reloads but with empty fields.
I have tried thinking of everything, but I can't find a solution. Thanks.
If it's possible, I would change the structure so that the form posts back to itself, and runs the validation of the mandatory fields. Then, if everything's ok, it will continue whatever processing is necessary. If there's a problem, it can show the form again, but in your code you will have access to the values already submitted, so you can pre-populate the form with these values and then display it to the user. It's a pretty standard design technique for this sort of thing.

How to ultimately disable a button with javascript?

I want to build an interactive page within a website. On this page i want to put a list of items, that people can choose from, in order to bring one of them to a certain event/party.
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
I want this event to happen within a conditional statement in JavaScript somewhat like this:
if (confirm("Do you really want to bring this item to the event/party?") == true) {
HERE I WANT TO PUT THE CODE THAT IS NECESSARY!
} else {
}
I don't think you can do this with pure JavaScript, because JavaScripts loads everytime the page gets refreshed. Are you getting your data from a database? If so, you could add another field to your table e.g. "party" with the name "active". If the user clicks on a button, the party would be inactive and not showing up anymore.
But as I said, I think it's not possible with only JavaScript.
PS: Greetings from Germany ;)
You can't do this with JavaScript alone. You will need to employ some server-side scripting and (ideally) a database to store who has selected what so that you can "prevent" someone else from selecting the same item.
Your system should also include a user registration process so that you can tie your products to events and then tie users to the products they have selected for the event.
Thus:
User registers -> they select an event -> they select a currently available product -> some confirmation occurs which then flags the database that anyone else is unable to select this product for the chosen event. The confirmation can be achieved with standard forms processing methods or AJAX...
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
Javascript can't preserve these types of states. It only runs in users browsers. You can't save it to cookie either. Saved cookie is only useful for certain users certain browser. You have to save this data in your server (preferably in database) from where you can read this item is chose by a user. And then you can decide from client when to disable the button.

Using javascript to go to the next tabindex of a form AFTER a refresh

I am currently working on an already established system that I cant make very drastic changes to. I need to "autosave" a form every time one of the fields is entered/updated. To do this I bound an event to the onblur of every field
document.form.submit();
It goes to the processing page, does what needs to be done and comes back to the form and retrieves the information from mysql to display it. It does have a bit of a "flash" from the reload but this is not a problem. The real problem is the user loses their tabindex since essentially the page is reloaded. So when tab is pressed the form is submitted and reloaded and the tab starts back from the beginning instead of the next field as the user would expect it to.
Is there a solution using javascript (no jquery) that I could implement that would "remember" the field the user was in and go to the next field after the form is submitted?
thank you!!

Get form field value after going back in browser?

I have a contact form with a similar setup to the "Ask a question" form here on Stackoverflow, a user will click a suggested link that will take them away from the contact page, on the new page they get to there is a link back to the contact page via:
Back
When the user returns to the page the previously entered values (e.g. name, email, question, message) are filled in correctly. How can I access those values from JavaScript? (using jQuery)
element.val();
^ Returns nothing as technically as far as firebug tells me there's no value actually entered. The browser is somehow filling the fields. I only need to access one text field in this case.
I think you can solve this with jquery session. https://github.com/AlexChittock/JQuery-Session-Plugin

How do I save and retrieve form values including dropdowns using cookies?

Is there an easy way to save forms just for people who accidentally click a link then use the back button or something? Including a dropdown input.
You could do an onkeypress for input boxes and textarea, and onchange event on all selects in your form. and every triggered event, call a script that serializes your form into a JSON string and store them as a cookie. and if your form is submitted, you can clear that cookie after.
In the scenario that the user moved away from the page, you should bind an onbeforeunload or onunload to warn the user that he's moving away. if he confirms, clear the cookie. if somehow the confirmation is skipped, the next time he visits the form, just read the cookie since it was not cleared.
but also note that there is a possibility that sensitive data might be entered. cookies (and even localstorage) is not safe for storage. you could provide an expiration so that the cookie gets deleted if it's not refreshed.

Categories