javascript, html onclick change variable

Question

I have a series of links, each belonging to different products with different prices.

Eg:

<%a class="items" href="order.htm" alt="" onclick="javascript: num = 149.99">Content<%/a>

After a user clicks one of the product links, I would like to be able to display the price of that specific product on the Order page. Is it possible to hold the changed variable for use on the separate Order page? If so, how?

This is purely for my personal exploration into JavaScript and HTML5.

Edit: Okay, so using sessionStorage, I can set and get variables.

Eg:

myVar = window.sessionStorage;
myVar.setItem("key", "149.99");

Now, how would I integrate the var with the product link, then call that var on the following page?

Did you try something? Can you show us some test? Maybe some code? — steo
– steo, Commented May 5, 2013 at 20:32
Please do not store price information in the browser. You will run into a situation where people can buy everything in your store for free and get $5 back for their effort. All data that should not be tampered with, like the contents of a shopping cart, should always remain stored safely on the server side, and passed back to the client with each page reload. — Niels Keurentjes
– Niels Keurentjes, Commented May 5, 2013 at 21:20
Thanks for the information. However, this is simply for a prototype and would not be used for any monetary transactions. — user2352728
– user2352728, Commented May 5, 2013 at 21:28

Hannes Schneidermayer · Accepted Answer · 2013-08-24 00:05:50Z

2

If you are creating a shopping page, I would definitely recommend you to include some PHP. With only JS and HTML, you will encounter many problems you will have to find a workaround for.

Use a server-side storage like PHP's $_SESSION superglobal. Any client storage could get manipulated. You are saying you aren't publishing it, but keep it clean anyways and don't learn yourself the worse way.

Anyways, if you just wanna get this working, here are the commands to store the data and get it afterwards:

//store data on the initial page using setItem()
sessionStorage.setItem("mykey", "Some Value");

//on the next page get it with getItem() and declare it as a var
var persistedval = sessionStorage.getItem("mykey");

//Now you can write the price to the document using the variable
document.write("Total is: " + persistedval);

Values can be set and retrieved using either getItem() and setItem(), or by directly referencing the key as a property of the object, like in my example above.

But remember, sessionStorage isn't very safe, since it's stored in the browser session.

Imagine you even forgot your price validaton check and some 'hacker' manipulates the data and changes the price from 45,99 to -249,99 and the product name to Credit note.

If you want to go deeper into shopping pages, user areas, etc. you should concentrate on HTML+PHP at first and just use JS when you need it (which will be mostly DOM-Manipulation when you start off).

But it's great for storing a user login, any user-specific data or insensitive data, no question about that.

Hope this helps.

edited Aug 24, 2013 at 0:05

answered May 6, 2013 at 0:38

Hannes Schneidermayer

5,9554 gold badges34 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2352728 Over a year ago

Thank you. So, with the sessionStorage setters and getters, I set the value of the variable, then get the value of that variable on the next page with something like document.write("Total is: " + sessionStorage.getItem("key")); ?

user2352728 Over a year ago

Whew, that helped quite a bit. Thank you, sir.

Jason Sperske · Accepted Answer · 2013-05-05 20:34:18Z

2

You could store your cart using localStorage

answered May 5, 2013 at 20:34

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

1 Comment

user2352728 Over a year ago

Thank you for the quick reply. I will check out localStorage.

danwellman · Accepted Answer · 2013-05-05 20:36:15Z

1

JavaScript has no notion of state, so by itself it cannot persist information across pages. However, there are several different ways that we can remember data from one page to another.

We could use a cookie if really really have only a very small amount of data to store and want to support old browsers.

Another way to do it would be to use LocalStorage to store the information. This gives a much greater amount of storage space and has a flexible and easy to use format to set and retrieve the data.

answered May 5, 2013 at 20:36

danwellman

9,4018 gold badges65 silver badges92 bronze badges

Collectives™ on Stack Overflow

javascript, html onclick change variable

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related