CODEWITHSUNDEEP
javascripthtml
Envious
Envious

Reputation: 487

Using JS function with button to display variable

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

Upvotes: 0

Views: 1982

Answers (2)

Jack
Jack

Reputation: 15872

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?

Upvotes: 1

Serge
Serge

Reputation: 2074

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...

Upvotes: 1

Related Questions