can i make javascript persist after a refresh? - javascript

In my form i need to select an item (which is a div with text or an image) and i do set the id of a hidden input via jquery live click event.
In the case the user has logged out or session has expired he must go back and refresh the page (after logging in). After a refresh firefox keeps all input data (textarea, text, select, etc). BUT the value i set in the hidden input is reset back to 0 and the user must click the item again.
How can i make javascript remember after a page refresh? Everything else is remembered after a refresh, its natural for the user to expect this is too instead of being annoyed every time some error occurs with his entry.

You can store some information in a cookie, or in the window.location.hash key or in the window.name
All these values will be kept when you refresh.

Try to use type="text" and style="display:none" instead of type="hidden"

Sounds to me you can use cookies to store the selected value. Don't forget to clear once the form has been processed.
EDIT 1
If you have a situation when the user can submit it more time, you must prefix each cookie with an ID to denote the current form.
When the form is presented to the user first time, make a hidden field having the timestamp stored in it (This can be done on the server side). Then you can use this timestamp for the cookie prefix, so you will have cookies for the form that has been generated, and another timestamp for the 2nd form the user works with. You will have independent cookies for each form you open in your browser.
When you submit the page, the timestamp is sent to the server and you can setup cookies. If the user hits the browsers back button, it will go back to a form, where you already have the timestamp in your form's html source, so it will load the cookies for that form.

Related

reload page I lose all values in form

I have made a web form that has some fields that are manually entered, others that are a dropdown, and some calendar fields that are in javascript. My latest addition has a dropdown that is populated from a selected value of a previous dropdown. When it reloads the form, I lose all of the previously entered values and only retains the value to the one dropdown. Do I have to capture all the values, or is there a way to just populate the 2nd dropdown without reloading the form?
-.- one word. AJAX. use it.
any time you reload a form you will lose all unrecorded data period.
If you must reload the page save all the data in a cookie or something.
There's a way to save data without ajax and whithout sending anything to the server. It's called sessionStorage.
// store item
localStorage.setItem("index", "value");
// retrieve item
var data = localStorage.getItem("index");
So you just have to save the datas with sessionStorage after any action (click on a button, keydown, mouseleave…) and whe you reload the page, you just have to populate it again from the data you have stored in session!
I assume that by reloading the form you mean submitting it, which then returns a version of the page with the second dropdown populated according to the submitted first dropdown. If that's the case, you might consider having all possible values of the second dropdown hidden and then populating it with JavaScript after a selection in the first one is made. If the amount of possible values is very big or has to be computed server side (as in, you cannot know all the values initially) then you could use AJAX to submit the form and avoid reloading of the entire page.
Check your page's cache-control. This attribute tells the browser to rely on its own cache to reload pages.
This can be set as a meta tag. For example:
<meta http-equiv="Cache-control" content="public">
But a better approach (in my opinion) is through the server-side, using the header()function.
Note that some prefer to set it to no-cache when it comes to forms, in order to avoid spam and also for security reasons.

Javascript: Making divs hold state of display='block' when user clicks BACK button in browser

I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.
As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.
Cookies or localStorage if you aim for only modern browsers:
localStorage
Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.
All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.

Need to redirect after back button pushed. How?

I have a set of three apps/scripts.
The first allows the user to select a value. That value is passed to the second script, which takes the value, reads a database, and produces XML which is then posted to an Eclipse/Java/RAP application immediately, without user intervention using Javascript "onload'.
After the RAP application is loaded, to the user the back button doesn't seem to work. The back button takes the user to the second script, which gets the same values it did the first time and then immediately forwards to the RAP application again.
We want the back button to work as the user expects, i.e. to take the user back to the first script.
Since using the back button submits exactly the same information as it did in the first pass, including the referrer, the only way I can see to do this is to use cookies.
Is that it, or is there a better way?
Thanks,
Sean.
On page B set a cookie
On page A, detect the cookie. If it exists, clear the cookie then redirect.
One issue: Page A doesn't know if you got there by pressing BACK or if you navigated there directly. If you can live with that, it will work.

Don't retain hidden field values from previous postback

I'm working on a page where a user can update his/her profile. From this page, the user is able to upload a profile picture. I store a reference to this profile picture in a hidden field on the page that is dynamically created. This field is only usable for a single update and is only significant to server-side logic on postback; it is no longer valid afterwards. The problem I'm currently having is that if a user updates a profile then hits the back button in a browser, the values of these photo-related hidden fields are retained when they shouldn't be: it only ends up ruining my server-side logic. I could clear these hidden fields on page load through javascript, but is there a better way?
clear the hidden field on postback like..
set the hidden field value on page load, if there is post back request to the page then set the value of hidden field to 0

Check to see if a user has came from a 'forward' page

I am currently working on a form which posts to a web service. The form validation is done at the web service and if a validation error occurs the user is presented with an error and a back button.
The form contains a number of default values which I am auto populating. These values then overwrite any values that the user has inserted when the back button is pressed.
Is there a way I can detect to see if the user has pressed the back button and prevent the auto population?
My guess would be you are filling these post load via JS? Because the value attribute should not override new values. If you are, I would just do a check to see if the field is empty before loading in the text.
Also, I would look into the placeholder attribute.
Pass a parameter as part of the URL that your back button sends the user to, then check to see if that parameter is part of the URL of the current page in your Javascript. If it's present simply don't populate with the default values.

Categories

Resources