How to Retain text in Text box using Javascript? - javascript

I have A page for registering user Details and from this page I have an option for adding his Sate/Continent. After Adding Sate/Continent he can navigate to his previous page.. But At this time Already filled Data's are missing so that he can have to enter again this.. Is there any possibility to solve this using javascript??

Since you are navigating away from page you can either use some server side code to create a session and retain values between pages. Or you can use js cookies to retain the values like
document.cookie="continent=asia";

Related

Navigating back to Search Page with same state (JavaScript)

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.
e.g.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below
You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily.
Like this-
localStorage.setItem("tags",tagItemsInAnArray);
And laterlocalStorage.getItem("tags");
You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.
Here is a demo:
//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));
//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
//cache data exist
}
//when you need to delete cache
localStorage.removeItem("searchFilter");

The new added field doesn’t show up when I reload the page

I am facing an issue and I don’t know how to resolve it.
I added a field on a webpage using JavaScript, ( when the user clicks on a button a new field should be added and it must be a static I mean it doesn’t suppose to be disappeared when move to another page or refreshing the page)the field appears but when I refresh the page it disappears.
Is there a solution for this?
Usually the local variables which are set by JS will be cleared when refreshing page, so what you can do is,
1) make use of LocalStorage API or
2) if you have a server, create some API calls, store the value in DB, if the user logs in from different browser, he can see the field.

Saving previous page parameters js, jsp

I'm currently working on one project which uses jsp, javascript, spring among others. I have a search page implemented where user can search by different criteria. (e.g. http://localhost:8080/service/timesheet/view?status=A&size=100&sort=startDate,asc&page=0&f_startDate_gte=2016-02-01&f_endDate_lte=2016-02-29)
When I click on some entry in this page I am redictered to the new page where a single item is shown. Now I want in this page to have a button which will bring me back to the search page but with the previous configured criterias. But the thing is that I can acces to those single item pages also from other points in application. What would be the best way to do this? Does it need to be done with passing parameters from jacaScript and checking out what was the previous visited page? Thank you for your help!
put it in user session object with a key that uniquely identify it. then you can make the decision based on that key/object pair.

Javascript reload, but keep post variables

I'm working on a script, and if a button is pressed, I want the page to reload. However, I want to keep the current values of my POST-variables.
I'm using JavaScript, and I've tried location.reload(), but I lose the variable values. However, if I press Ctrl+R (refresh), I get the alert box which asks if I want to keep the POST-variables.
Does anyone know how to keep POST-variables when you reload a page using JavaScript?
In the onclick handler for the button you could create a form programmatically, fill it with hidden inputs that reflect the names and values of your variables and finally submit that form.
You will have 2 opportunities:
Store the post variables in a hidden form an submit this via javascript
Use session handling
http://www.php.net/manual/en/function.session-start.php

Using Javascript, how can I change the CSS display property on a different HTML page

So, I want to change the display style of one of my divs, here's the code in my javascript:
document.getElementById("header1").style.display='none';
Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?
Thank you in advance!
You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.
Edit
You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.
// Redirect without querystring
window.location = "http://www.mySite.com/default.html"
// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"
// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"
Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.
You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.
how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code

Categories