How should i store newly created elements in JavaScript? - javascript

I running in some issues with my code below. I have achieved to create a new element and add it to the Option list. Now a whenever i refresh the page the new element will disappear from the list.I am not familiar how cookies or session works in JavaScript. But how could i store those element and whenever i create a new element to be able to be in the Option list even after refreshing. Sorry for my English , and thank you for the help in advance. My code is below as you can see.
<select name="name" id="name">
<option value="burim" class="someName">burim</option>
<option value="eliot" class="someName">eliot</option>
<option value="saska" class="someName">saska</option>
</select>
<br><br>
<input type="text" id="add">
<input type="submit" name="submit" value="ADD list" id="btn">
<p class="output"></p>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var n =document.getElementById("name");
var list=document.getElementById("add").value;
var listArray={};
var newOption=document.createElement("option");
listArray=n;
newOption.className="someName";
newOption.innerHTML=list;
newOption.value=list;
n.appendChild(newOption);
}
</script>

There is three ( main ) way to store client side data in Javascript.
The cookies are used to store data that is accessible to the server, ex: JWT authentication token.
The other two are Session storage and local storage. I've never learn the difference between the two but here is a good question about it.
In your case, I would suggest using localStorage. It is very easy to use and will be available until clear programmatically or by the user.
You can add data to the localStorage using
window.localStorage.setItem('key', value)
and retreive it using.
window.localStorage.getItem('key')
You should only keep minimum data in the localStorage, don't store your HTML. Store only enough data to rebuild it once you need your information.

Related

Pass Value from one page to another page

I want to pass form value from one html page to another html page.
I wonder Is that possible to pass values between html page not using server side code.
And if not, how can i pass values?
(I prefer to not use server side...)
Here is some my project code :
First HTML page
<form id="myForm" method="post" action="secondHTMLPage URL">
<input type="hidden" id="UserID" name="UserID" value="12345">
</form>
<script type="text/javascript">
$("#myForm").submit();
</script>
Second HTML page
<script type="text/javascript">
// In here, I want to retrieve my $("#myForm")'s data from First Page.
</script>
You can try with Window.sessionStorage or Window.localStorage.
The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
Set value in one page
localStorage.setItem('myCat', 'Tom');
//using sessionStorage
//sessionStorage.setItem('myCat', 'Tom');
Get the value in other page
var cat = localStorage.getItem('myCat');
//using sessionStorage
//var cat = sessionStorage.getItem('myCat');

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.
The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>
There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

Passing Variables from one page to another

Im trying to pass a value from one page for a product to another page for the cart.
I've tried a few different options but haven't managed to come up with any solution.
I'm new to html and javascript so need a simple solution if thats possible so that I can understand.
Product Page
<label for="exampleFormControlSelect1">Example select</label>
<div>
<select class="form-control" id="Selected">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</div>
<button id='btn' type="button" class="btn btn-secondary">Add To Cart</button>
<script type="text/javascript">
var value=0;
function send_selected(){
var selector = document.getElementById('Selected');
var value = selector[selector.selectedIndex].value;
sessionStorage.setItem(value);
}
document.getElementById('btn').addEventListener('click',send_selected);
</script>
Cart page
<script type="text/javascript">
var value = sessionStorage.getItem("value");
document.getElementById('display').innerHTML = value;
</script>
<body>
<div id="display"></div>
</body>
I would need to value from the drop down to be passed to the cart page to work out the value for all the users products selected.
You need to add two arguments to sessionStorage: key and value. Something like this:
sessionStorage.setItem("selectValue", value);
Also, as far as I know if you work with local html files opened like path/cart.html in the browser, the sessionStorage can't help you; it's scope is limited to the page. If you serve them through localhost, you'll be alright.
If this pages have different url, you can do it with query params: https://en.wikipedia.org/wiki/Query_string
By Browser Storage Method :
As mentioned by #Ferenc, the setItem method of session storage takes two parameters.
sessionStorage.setItem("selectedItem","value");
or you can use
sessionStorage["selectedItem"] = "value";
And to retrieve the value anywhere else in the browser you can either use the getItem() method or you can go with the array like value access approach i.e.
var value = sessionStorage["selected"];
But I would suggest you go with localStorage instead of sessionStorage, Because of it's larger scope than the sessionStorage scope.
You can read difference b/w session storage and local storage here.
Note: You can check for errors in your javascript code(Which now occurs when you call the getItem method with a single parameter ) by looking in the browser console.
By Query Parameters:
Well, this is not a recommended method if you are not using any server-side language. i.e. Java, PHP etc.
In this case, you append the query string in url. i.e.
http://www.url.com?value=selected
To Read how to access query parameters by using javascript refer to this question.
It worked for me to add to the 1st HTML file:
where_from = document.getElementById("where_from").value;
sessionStorage.setItem("pass_to_other_form", where_from);
and then to the 2nd HTML file:
var from_other = sessionStorage.getItem("pass_to_other_form");

Getting values from html form as JavaScript variables

i want to capture input variables sent via form from one page to another.html page and obtain these values as JavaScript variables. Can this be done.
This is my form;
<form action='another.html' id='form' data-ajax='false'>
<input id='sent_by' value='tom'/>
<input type='submit' value='Submit'/>
</form>
And in my another.html i tried to get the values as;
var sent_by = $.session.get("sent_by");
But i am not able to get the values. All help is appreciated.
You can use the browser's localStorage to achieve this. Before submitting and going to the other page store all the values of the form in the localStorage and you can access it on the other page:
Page1.html
Field Name = "name" <input type="text" name="name" id="name" />
Read the value and store it to localStorage
localStorage.setItem('name', document.getElementById('name').value);
and so on.
You can make a function in JavaScript that saves all the fields of the form in localStorage on / before submit.
To read these values on the other page:
Page2.html
Value stored for key name can be get using the following JavaScript:
localStorage.getItem("name");
NOTE
the page1.html and page2.html should be in the same domain for you to access the localStorage.
Read more about localstorage at https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
Have you tried using Window.localStorage? It's similar to sessionStorage but with no expiration date. So, be sure to clear it once the browsing session ends.
I think the answer provided by #Shakti Phartiyal is probably the most practical and a sweet trick I might add. The main reason I'm writing this post is because I had also taken a long path of using javascript to pass along this kind of information. It resulted in me bewildered at how powerful PHP can be for some tasks that you dedicated javascript to do. (Yea I know some javascript wizards out there can do everything with it, I'm just talking about basic programming tho). So if you wondered what the PHP way of passing this around:
Your modified html form:
<form action='another.html' id='form' data-ajax='false' method='post'>
<input id='sent_by' value='tom' name='uname'/>
<input type='submit' value='Submit'/>
</form>
and then in "another.php" you would have this to retrieve the input from the form:
<?php
$uname= htmlspecialchars($_POST['uname'];
?>
Great. But how to make this php variable into javascript?
Ah, the fun part. You're going to write javascript to your webpage with php - you do something like this:
var uname = "<?php echo $uname; ?>";

Having problems with my very basic HTML static page generator

I am trying to create a new HTML page from a form and some javascript. The form is much longer than this, but I figured that if I gave you guys 2 text inputs I can take it from there. I am running into a problem where I cannot retrieve the value of my forms and send it on to my new page. My new page won't show anything because it thinks that my forms are null, or that they don't exist possible. Which is probably why it returns undefined. I'm completely stuck here and I have no idea what to do as far as setting up the new page from my form goes.
I need help with getting newPage.html to display my title and subtitle.
Here is js:
var title = document.createElement("h1");
var titleForm = document.getElementById("title");
var subTitle = document.createElement("h3");
var subtitleForm = document.getElementById("subtitle");
var myDiv = document.getElementById("container");
function getElements() {
//set the title
var titleNode = document.createTextNode(titleForm.value);
title.appendChild(titleNode);
//set the subtitle optionally
var subtitleNode = document.createTextNode(subtitleForm.value);
subTitle.appendChild(subtitleNode);
}
Here is the original HTML page:
<body>
<h1>Create A New Webpage Using This Form</h1>
<form id="form">
<label>
Title:
<input type="text" name="title" id="title" value="title">
</label><br><br>
<label>
Subtitle:
<input type="text" name="subtitle" id="subtitle" value="subtitle">
</label><br><br>
<input type="button" value="Generate Page" onclick="window.open('newPage.html');">
</form>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>getElements();</script>
</body>
Here is the page that I want to create:
<body>
<div id="container">
<ul id="myList"></ul></div>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>setElements();</script>
</body>
I'm not looking for you to complete this for me, but just a little bit of guidance. Thanks.
It sounds like you want JavaScript on one page to read from JavaScript on another page. That's not possible on its own. You can't define var a = 1 on somePage.html then read that variable when the user's browser loads newPage.html.
You'll need to involve something else, such as the URL or local storage: https://stackoverflow.com/a/35027577/5941574
Query Parameters
One option is to make a GET request to newPage.html with whatever values you want include as query parameters in the request. Then newPage.html will contain a script that parses the URL to get the parameters and builds and inserts HTML into the document based on the values it finds in the URL.
Local Storage or Cookies
This works in pretty much the same way as the other method except instead of getting your values from the URL, it is saved to the user's computer with either cookies or local storage.
Server Side
A third option of course is to send the user's selections to a server and have the server build and serve the resulting page.

Categories