reload page I lose all values in form - javascript

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.

Related

Browser back & forward and form autocomplete mess

On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API

Apex - Clear form when leaving page (also on redirect)

Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?
You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.
You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});

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.

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.

can i make javascript persist after a refresh?

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.

Categories

Resources