Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating a shopping cart (table)

    Hi, i'm new to JavaScript.

    I'm trying to create a shopping cart where a customer buys an item by selecting the quantity from a drop down list, then they presses a "view shopping cart" button.

    When this is pressed, a table (which is a shopping cart) appears with the name of the item, quantity, price per item and the sum total (quantity * price per item).

    Can someone tell me how i go about creating the table in javacscript, calculating the price and getting values from the dropdown list.

    I've already started it, but i'm having serious trouble. Here's my code so far:

    Code:
    <html>
    <head>
    <title>Toy's Will Kill</title>
    <script language="JavaScript" type="text/javascript">
    function CreateTable(){
    var tab = document.createElement("table");
    document.getElementById("place1")
    .appendChild(tab);
    tab.setAttribute("border", "3");
    var tbdy=document.createElement("tbody");
    tab.appendChild(tbdy);
    
    var cart=Array("Name","Quantity","Price per Item", "Sum Total");
    for (var j=0; j<=1; j++) {
      var tr=document.createElement("tr");
      tbdy.appendChild(tr);
      var td=document.createElement("td");
    td.appendChild(document.createTextNode(cart[j]));
      tr.appendChild(td);
      var td=document.createElement("td");
      td.appendChild(document.createTextNode(j)); 
      tr.appendChild(td);
      }
    }
    </script>
    </head>
    
    <body>
    <form name=ToysWillKill>
    
    <img src="images/toy1.jpg" alt="toy1"/>
    <select name="toy1" id="toy1">
    <option value="Zero">0</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
    <option value="Five">5</option>
    </select>
    <br>£5.00</br>
    
    <p><img src="images/toy2.jpg" alt="toy2"/>
    <select name="toy2" id="toy2">
    <option value="Zero">0</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
    <option value="Five">5</option>
    </select>
    <br>£5.00</br></p>
    
    <p><img src="images/toy3.jpg" alt="toy3"/>
    <select name="toy3" id="toy3">
    <option value="Zero">0</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
    <option value="Five">5</option>
    </select>
    <br>£5.00</br></p>
    
    <p><img src="images/toy4.jpg" alt="toy4"/>
    <select name="toy4" id="toy4">
    <option value="Zero">0</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
    <option value="Five">5</option>
    </select>
    <br>£5.00</br></p>
    
    <p><img src="images/toy5.jpg" alt="toy5"/>
    <select name="toy5" id="toy5">
    <option value="Zero">0</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
    <option value="Five">5</option>
    </select>
    <br>£5.00</br></p>
    
    <input type="button"  value="View Shopping Cart" onClick="CreateTable();">
    </form>
    <div id="place1"></div>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,201
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Dare we assume this is homework???

    A shopping cart entirely in HTML is not a very useful thing. Without server-side code (PHP/JSP/ASP/CF/etc.) to store the order into a database table, the whole experience will of necessity be transitory. So when I see an all-HTML shopping cart, I have to assume it's homework of some kind.

    Let me give you one big hint: You do *NOT* want to use value="One" and so on. You *want* to just use value="1". Or get rid of the value= altogether.

    Another hint: In the real world, all items are *NOT* the same price. So you would want to display the appropriate price *AND* you'd want to be able to multiply quantity times appropriate price. One good way to do this is to use a hidden form field.

    Oh, w.t.h. We aren't suppose to do homework here, but I'll show you a quicky sample:
    Code:
    <p><img src="images/toy4.jpg" alt="toy4"/>
    <input type=hidden name="price4" value="3.75">
    <select name="toy4" id="toy4">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
    <br>£3.75</br></p>
    ...
    By the by...*does* the table, as you've coded it so far, appear correctly?

    Oh...and what do you do if the user changes his/her mind? Changes the quantity of some item?

    (p.s.: I'm sure the reason you had no responses until now is because most people just passed on answering, assuming it is homework.)

    And if this is not homework, then sincere apologies. But then I have to wonder if this is the right way to go for a "real life" shopping cart. I wouldn't use it except for the most limited kind of product range. 10 products that never change, maybe.
    Last edited by Old Pedant; 05-07-2009 at 11:34 PM.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, i've already sorted it out now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •