Passing Values for Noobs

Question

Ok I am a complete noob to html and programming. I am working on a project that will allow users to select different items on a screen. Once these are selected I have an "add to cart" button. When this is clicked I want all of the data passed to a seperate page so the use can see their selection and confirm before it is submitted. Here is the code I have so far and have done much research and can not figure out if html can pass this to another page using html code or javascript. Any help will be greatly appreciated. Thank you.

<input type="submit" value="Add to Cart" /></a></p>
<form action="demo_form.asp">
<p>
    <input name="chaism" type="checkbox" value="3.50" /><strong>Small Chai Latte&nbsp;$3.50<br />
    <input name="chaimed" type="checkbox" value="4.0" />Regular Chai Latte $4.00<br />
    <input name="chailrg" type="checkbox" value="4.50" />Large Chai Latte $4.50</strong></p>
<p>
    <select name="Favorite_Color" size="1"> <option selected="selected">Iced </option><option>Cold </option><option>Hot </option></select></p>
<p>
    <input name="chai" type="checkbox" value="3.50" /><strong>Whipped Cream<br />
    <input name="chai" type="checkbox" value="4.0" />Cinnamon<br />
    <input name="chai" type="checkbox" value="4.50" />Soy Milk&nbsp;&nbsp;&nbsp;&nbsp;</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>Quantity</strong>: <input max="100" min="1" name="quantity" size="7" style="width: 67px; height: 27px;" type="number" /></p>

Answer 1

You need to learn about server side programming, according to your form it looks like you are using asp.net. Here are a few places to start learning asp.net

http://www.w3schools.com/asp/

http://www.asp.net/mvc/tutorials

Good luck!

Answer 2

The method I would recommend is to have all your checkboxes have the same name, and have their value represent something unique about the product.

<input type="checkbox" name="product" value="1"> Chai tea<br />
<input type="checkbox" name="product" value="2"> Lemon tea<br />

If you select both products, product=1,2 will be passed in the POST data. It's then up to you to loop through the selected products, and output each one. (That process depends wholly on your server-side code).

Answer 3

Generally you need some sort of server that handles the parameters you pass, in your case chai or chaism. It seems you're working with ASP. I would start looking there on how to capture GET parameters and print them out onto a page.

If you want a pure Javascipt/JQuery of handing these parameters, here is a related question I found which lets you get the parameters by name, which then you can fill in values later.

Answer 4

This may be a little intense if you're just starting out, but Smashing Mag has a good article about creating a shopping cart using session storage. http://coding.smashingmagazine.com/2014/02/13/create-client-side-shopping-cart/

You could make use of HTML5 local storage here, it's really simple. And the page explains it really well: http://diveintohtml5.info/storage.html

Basically you can create variables on one page, and then get them on any other page using:

localStorage.setItem('bar',foo);

and

localStorage.getItem('bar'); // returns foo

Hope this helps.