Carrying an array to new page

Question

I want to know how I can pass a variable from one page to another using JavaScript

Here's my code:

var currentBasketPrice = 0;

var quotes = new Array(
"A good painting to me has always been like a friend. It keeps me company, comforts and        inspires.",
"A man paints with his brains and not with his hands.",
"A picture is a poem without words.",
"A work of art is the unique result of a unique temperament.",
"An artist cannot fail; it is a success to be one.");
var quotePerson = new Array(
"Hedy Lamarr",
"Michaelangelo",
"Horace",
"Oscar Wilde",
"Charles Horton Cooley");

var imgSrc = new Array ("images/hangings/1.jpg","images/hangings/2.jpg");
var prices = new Array (100,50);
var sizes = new Array ("450*350","100*50");

var inBasketPrices = [];
var inBasketNames = [];

function load(displayQuotes, displayBasket, displayProductInfo)
{
if (displayQuotes==true)//quotes
{
    var quotenum = Math.floor(Math.random()*5 );
    document.getElementById('quote').innerHTML= quotes[quotenum];
    document.getElementById('quoteperson').innerHTML=" - " + quotePerson[quotenum];
}

if(displayBasket==true)
{
    var list = $('#basketsidebar ul');
        list.append('<button type="button">Checkout</button>');
}
if(displayProductInfo==true)
{
    for (var i = 0; i < prices.length; i++)
    {
        var list = $('#products ul');

        list.append('<li><img src="'+imgSrc[i]+'" width="525px" height="350px"/></li>');
        list.append('<li>Price: £' + prices[i] +'</li>');
        list.append('<li>Size: ' + sizes[i] +'</li>');
        list.append('<button type="button" onclick="addToBasket(' + i + ')">Add To Basket</button>');
    }
}
}

function addToBasket(itemAdded)
{
inBasketPrices.push(prices[itemAdded]);
var list = $('#basketsidebar ul');
    list.append('<li>Price: £' + inBasketPrices[itemAdded] +'</li>');
}

I want to make it so that when the checkout button is clicked the user is directed to a new page, and the items currently in the basket are carried over. At the moment only the prices of the items get added to the basket.

I have no idea how to do this so if anyone could help it would be greatly appreciated.

@LightnessRacesinOrbit He does, it's just that he mixes 8-column tabs with spaces, and indents by 4 columns. (urgh) — millimoose, Jan 27 '12 at 19:16
I do, some formatting has been lost when i've pasted to here — andy07070, Jan 27 '12 at 19:54

Larry K · Answer 1 · 2012-01-27T19:27:44.267

1

Welcome to StackOverflow!

To move info from one page to another, there are some techniques:

Send the data via the server. Send via POST or GET variables when the "Add to Cart" or "Checkout" button is pushed. That is, when the button is pushed, send the info on what is in the cart as additional variables. Then, when the "checkout" page receives the request, it looks for the info in the variables to use when sending the "checkout" page back to the browser.
Use Javascript to store the cart contents in a cookie. Then the cookie is sent to the server as part of the checkout request. There are JS libraries for changing the cookies. Eg Here and here.
Use Javascript and Ajax to tell the server whenever something is added to the cart. Use a cookie to store the session_id for the user and his cart. The checkout page looks up the cart from the session id

It is common for books on the server-side software to discuss shopping carts since carts are a common issue for people. What server-side software are you using?

Also There is no need to compare a variable to "true" in a boolean expression such as your if statements. In other words:

if (displayQuotes==true) 
// is the exact same as
if (displayQuotes)

edited Jan 27 '12 at 19:27

answered Jan 27 '12 at 19:22

Larry K

47,808
15
87
140

I'm not using any server side software, my mate just wanted me to make a quick website for him to sell wall hangings, and i thought i could do with learning web dev so here i am. – andy07070 Jan 27 '12 at 19:56
Is there any books you would recommend for server side software? – andy07070 Jan 27 '12 at 19:57
If you want to sell something for money, then the project immediately gets much more complicated. Probably not the best thing to learn if you also need a production system for your friend-- Taking credit cards securely, a database of the customers, SKUs, orders, etc; an attractive site with photos, and tracking "abandoned carts" (for marketing analysis) etc etc. Suggest using a ready-made solution from shopify, Yahoo, Amazon, Ebay, or others. Re server side sw: php and Ruby on Rails are two popular solutions. Look for book reviews and book contents to see which discuss shopping carts. Many do. – Larry K Jan 27 '12 at 20:42

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Javascript is a language that gets executed by your browser on a defined page. The relation between pages is handled by the HTTP protocol, and thus propagating data from one page another should be done with this protocol.

HTTP allows you to share data in three ways:

GET
POST
Cookies

Data in the GET format is easy to write in Javascript, you only have to append ?var1=value&var2=value2 to your URL. You can retrieve data by either using a server-side programming language or by analyzing the URL (see here). POST can be a little more tricky for your application, but can still be done. Cookies can also be an option, but are a bit different. Instead of following the HTTP request as GET/POST, Cookies are being held on the client computer. You can manipulate cookies via Javascript as shown in this tutorial.

score 0 · Answer 3 · answered Jan 27 '12 at 19:21

0

I'm not sure you can do it with javascript. Try using PHP, $_SESSION in particular

answered Jan 27 '12 at 19:21

Sergei Kutanov

825
6
13

Carrying an array to new page

3 Answers3