Using JS function with button to display variable

Question

I asked a similar question earlier, but realized later that I NEED to use javascript for this bit. Here's my situation:

I have a shopping website, with product x and a "Buy" button. The "Buy" button links to the checkout page, as well as a javascript function that has 2 global variables called "product" and "price". I want to display these 2 variables on the checkout page which will auto-update depending on which products "Buy" button the user presses.

var x = "iPhone";
var xprice = 199.99;
var product;
var price;

function productX(){
    product = x;
    price = xprice;
}

^^^^ Does not work. It will simply relay "undefined" in the area the variable is written. Can someone help me out, if they can understand what I'm trying to do?

I simply want the confirmation page to show the product the person is going to buy, and the price depending on which buy button the user pressed. I cannot seem to get it to work using JavaScript. I don't want to use PHP, databases or cookies.

Thank You

I presume that the buy area and the checkout are 2 distinct pages? Not just 1 where you show/hide/swap in HTML? — mj_, Apr 28 '12 at 02:37
Well, it looks to me that you're setting a pair of global variables on page 1. How are you passing those variables then to page 2? It's my understanding that when you go to page 2, you're leaving the scope of page 1 and so those values will disappear. — mj_, Apr 28 '12 at 02:40

score 1 · Answer 1 · edited May 23 '17 at 10:24

If you want to pass values to your second page you will need to append them to the URL of the link for the 2nd page.

Assuming your 2nd page is called checkout. You would link to the checkout page as follows presumably:

<a href="checkout">Checkout</a>

Now you can't use a form submit to do this... read here for more information: submitting a GET form with query string params and hidden params disappear

You will need to construct the Query String yourself.. (this is the ?something=10&somethingelse=20) part of the URL.

What you will need to do is attach a JavaScript function to the click of the button via an event listener. You will also need to give your link an ID. This function has two parameters which are the price and name of the item.

<a id="checkout" href="checkout">Checkout</a>

function checkout(price, name)
{
  document.getElementById('checkout').href += "?price="+price+"&name="+name;
}

One the second page has loaded you'l need to retrieve these values from the URL by splitting the string value into an array.

See here: How to get the value from the GET parameters?

How? I'm still a beginner in Javscript. I assumed making the variables global would allow it to reach to both pages. — Envious, Apr 28 '12 at 02:44
No, as soon as a new page is loaded all of the JavaScript will be reloaded. I'll edit my post and write some basic code for you. — Jack, Apr 28 '12 at 02:45

score 1 · Answer 2 · edited May 23 '17 at 12:02

Well, given that you're attempting to pass data from one page to another, without PHP, or cookies, this is going to be difficult.

Assuming you have a form with your "Buy button" to go to the next page, you can set the form's action="GET", and have 2 hidden fields in the form:

<input id="productInput" type="hidden" name="prpduct" value="" \>
<input id="priceInput" type="hidden" name="price" value="" \>

And, then we would need to change your function to:

function productX(){
document.getElementById("productInput").value = x;
document.getElementById("priceInput").value = xprice;
}

This would then let the javascript pass the values via GET to the next page.

Which, admittedly, javascript isn't designed for. So, to get these values out on your next page, you'll have to use a function such as this one:

function GetFromUrl(url, key) {
var pairs = url.substring(url.indexOf('?') + 1).split('&');
for (var i = 0; i < pairs.length; i++) {
  var pair = pairs[i].split('=');
  if(key == pair[0])
     return pair[1];
}
return null;
}

(Credit to Casablanca over here Make a JavaScript array from URL I modified his function)

Then, in the body's onload, call this function with:

product = GetFromUrl(window.location, "productInput");
price = GetFromUrl(window.location, "priceInput");

From here, you'll have to do some document.getElementById() stuff to modify the actual page.

Sorry if I'm not being very descriptive...

Using JS function with button to display variable

2 Answers2