JavaScript - Creating Multiple Cookie From Add To Cart Onclick
I need help in creating a multiple value cookie when the user clicks the Add to cart input button. Here is the portion of code from the html page that creates the inventory item display and the Add to cart button. There are six of these on the page:
Code: <div id="inventoryspread"> <div class='productBoxInvUL'> <script type:"text/javascript"> document.write("<img src="+"'"+"images/"+arrImage[0]+"'"+"align='left'/>"+ "<p><br/><span class='invName'>"+arrName[0]+"</span></p>"+ "<p>"+arrDescription[0]+"</p>"+ "<p>Item# "+arrItem[0]+"<br/>"+ "<span class='invPrice'>"+arrPrice[0]+"</p>"); </script> <input type="button" value="Add to Cart" onclick='createCookie("name, value, 7", prompt("cookie created"))' /> </div> And here is a portion of the array that fills it: Code: var arrItem = new Array(); var arrName = new Array(); var arrDescription = new Array(); var arrPrice = new Array(); var arrImage = new Array(); arrItem[0]= "FE100"; arrName[0]= "Blacktop Jazzmaster"; arrDescription[0]= "Monster dual-bucker tone. Vintage style alnico humbucking pickup, single coil, skirted black amp knobs, and 3-way toggle switch. Alder body, Maple neck, Rosewood fretboard, 21 medium jumbo frets, gloss urethane finish and nickel/chrome hardware."; arrPrice[0]= "$699.00"; arrImage[0]= "FE100.png"; arrItem[1]= "FE200"; arrName[1]= "Roland-Ready Stratocaster"; arrDescription[1]= "Time-tested Fender tone, timeless styling, 3 single-coil pickups, synchronized tremolo, high-mass bridge block, shielded body cavities and medium jumbo frets. Built-in Roland GK-2A pickup system, tinted neck, parchment pickguard and control knobs, and a '70s-style logo."; arrPrice[1]= "$1,019.00"; arrImage[1]= "FE200.png"; arrItem[2]= "FA100"; arrName[2]= "CD220SCE Exotics "; arrDescription[2]= "Exotic and beautiful with rich tone, laminated burl ash back and sides, with a solid spruce top. Fender-designed dreadnought body, X-bracing, and die-cast tuners. Cutaway body design with rosewood bridge featuring a compensated bone nut"; arrPrice[2]= "$629.00"; arrImage[2]= "FA100.png"; arrItem[3]= "FA200"; arrName[3]= "Dick Dale Mailbu SCE"; arrDescription[3]= "Thin folk body design, laminated spruce top, laminated mahogany back and sides, scalloped X-bracing providing well balanced tone. Maple neck, rosewood compensated bridge and fretboard, vintage-style Fender tuners, and a surfin' red paint job on the top and back"; arrPrice[3]= "$849.00"; arrImage[3]= "FA200.png"; arrItem[4]= "FB100"; arrName[4]= "Standard Precision Bass"; arrDescription[4]= "Sound, look, and feel today's bass players demand. Classic P-Bass old-school design. Contemporary features and refinements. Alder body and a split single-coil pickup, this classic electric bass guitar lives up to its Fender legacy."; arrPrice[4]= "$579.00"; arrImage[4]= "FB100.png"; arrItem[5]= "FB200"; arrName[5]= "Roger Waters Signature Precision Bass"; arrDescription[5]= "Tastefully tailored, black-on-black color scheme, Seymour Duncan Basslines SPB-3 Quarter-Pound split-coil Precision Bass pickup, knurled black control knobs, brass nut, black bridge and strap buttons, vintage '70s-style open-gear chrome tuners."; arrPrice[5]= "$1,199.00"; arrImage[5]= "FB200.png"; arrItem[6]= "GE100"; arrName[6]= "Firebird X Limited Edition"; arrDescription[6]= "Turbo-charged Pure-Analog engine. Hand-applied and unique high-end wood finish. Beautiful, historical and yet contemporary and unique. Limited run of just 1,800 units. It is sure to become a collector classic."; arrPrice[6]= "$5,569.00"; arrImage[6]= "GE100.png"; The cookie only needs to include the Item#, Name and Price of each item to populate a shopping cart page. This is only a small student project and is client side only using javascript. Thank you for any help we can get on this. Similar Tutorialshello recently i finally managed to make a working shopping cart system, in that i can add as many items as i want and it will work, all using cookies. Then i have another page, the cart which reads the cookie entry made with each demo purchase, then using a while loop lists these items, the problem i am having, is that when i add the textbox which would hold the value of the quantity, it is put out on the next line down, instead of next to the text which i find quite annoying. Also i would like to know how i can add a button next to the textbox, for updating the quantity, also ide like to know how i could access that button, or have it do something, since it wouldnt be prewritten. any help would be greatly apreciated. here is a zip file containing the html files of the customizable purchase page, and the new shopping cart. be sure to refresh the page before trying to use the first page, so it establishes the counter cookie. Hi, i'm not sure this is the right spot for my question ,but i will try. ( sorry if not ) I need to create a script, that sets cookie ,named "something" with a random $value - something(1-500) every time the user refreshes his browser. Something like this : Y.Node.get("#Button1").on("click", function(){ var newValue = "something" + Math.round(Math.random() * Math.PI * 500); Y.Cookie.set("$something", newValue); Y.log("Set cookie '$something' to '" + $something + "'"); But when i refresh the browser the cookie must be with a new Value. I will explain more clearly : I hit Button 1, Activate this script,that sets me the cookie named "something" with a $value for example , something55 I refresh my browser,the same cookie has $value for example something98 Thanks in advance, Regards, Anton P.S. i'm trying to make it work for a few days .so i will be very glad if someone could help me here . I am creating a cookie that increases a "value" or "integer" by 1 (ie Y+1) every time any page inside my webpage. Any webpage that i put the code into. right now I need it so that when you visit a page with the code it increases the variable or "cookie" (Y) by 1. when Y reaches a certain number, I.E 10, it resets Y to "0" and redirects you to a URL. Please explain where each value would go in any replies. Please make code as simple and as low in file size as possible. I don't need any sort of flexibility, just a simple redirect to a webpage which WILL NOT have the cookie code in it. EX: when opening the menu of an iPod game it asks you to rate the game, saying remind me later resets the value to "0" and saying rate now, resets to "0" but does not keep counting on the next page. Thanks to all in advance and i hope you completely understood my problem and question! [spoiler] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function checkValue() String Y Y=Y+1 if(Y > 9){ alert(Y)} else{ alert(Y)} </script> </head> <body> <form action="Javascript:checkValue()" > <div align="center"> <input name="Logon" type="submit" value="Click Me"/> </div> <script type="text/javascript"> function checkValue() String Y; Y=Y+1; alert(Y); //if(Y > 9){ //alert(Y)} //else{ //alert(Y)} </script> </form> </body> </html> [/spoiler] I did not expect any of the above code to work, completely providing a new code will not surprise me or be a problem. Thanks again in advance! Hello there. I'm having trouble with cookies. I have a bunch of links that when clicked on, create a cookie. For each link I need to be able to save that cookie value to the main cookie name. Here is the click function I'm using to create the cookie: $j('a.createCookie').click(function(e) { var cookieName = "InsightsCookie"; var cookieValue = $j(this).attr("id"); $j.cookie(cookieName, cookieValue, {expires: 365, path: '/'}); }); The end result would be "InsightsCookie: cookieValue, cookieValue, cookieValue" - where each link clicked on would add a value to InsightsCookie. Any help would be much appreciated. Good day all: I'm wondering if the cancellation of one of my onclick js function in the below code is as a result of having multiple onclick function. here is the code: Code: <FORM NAME="SubCategory" method=post action='accountingsearch2.php' rel="nofollow" target='_top'> <p align="left"> <div id="presetlabel">Or use Preset Periods-->></div> <div id="SubCategory"> <SELECT NAME="specifiedperiod" style="display:inline";> <OPTION>Select a Time Period <OPTION>Today <OPTION>Current Week <OPTION>Current Month <OPTION>Current Quarter <OPTION>Past Quarter <OPTION>Current Year <OPTION>Previous Year </SELECT> </div> <div id="proceed2"><input type='submit' value='Proceed!' onclick='return ValidateSubCategory();'></div><!--the validation does not work with onsubmit--> </FORM> <form name="SubCategory2" method=post action='accountingsearch.php' rel="nofollow" target='_top'> <div id="callabel"><label for="theDate">From today thru</label></div> <div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"></div> <div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";></div> <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";--> <!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>--> <div id="proceed"><input type='submit' value='Proceed!'><!--onclick='return ValidateSubCategory();'--> </div> </p> </FORM> If such is the case, how can I address this problem? Currently, the first onclick function Code: onclick='return ValidateSubCategory();' works fine. The problem is with the second Code: onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline"; Any assistance is greatly appreciated! Mossa Ok, so basically what I've got is a button which when clicked, "opens" a section of the page. I also need the button to "jump" to this section of the page, because it's below the current content and won't be visible. What I've got so far is ... Javascript <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; location="#ordernow" } } function moveWindow(){window.location.hash="ordernow"} </script> HTML ... (The rest of the form is up here) <input name="Button" type="button" class="button" value="Order Now" onclick="toggle();moveWindow()" id="displayText"/> ... (This is the start of the section that becomes visible, along with the anchor point which is highlighted in red.) <div id="toggleText" style="display: none"> <a name="ordernow"></a> <fieldset> <legend>Order Confirmation</legend> <div class="standardinput"> <label>Company:</label> <input name="Company" type="text" class="textinput" id="Company" /> </div> If I put two separate buttons, both functions will work. Basically I need them to be on the same function, not sure how to do that? Thanks so much in advance =) Hi, I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick) during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh is completed it will open a popup. The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having any effect. In such case how i can handle this scenario? Thanks. Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter The very basic onclick code I threw together: Code: function descw() { document.getElementById("desc").style.display="block"; } function descc() { document.getElementById("desc").style.display="none"; } The div that needs a description... Code: <div class="select"><img src="image.jpg" onclick="descw()"></div> ..and the actual description div. Code: <div id="desc"> <img src="close.jpg" onclick="descc"> <p>Description</p> </div> This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error. Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Date: 11/12/2014 Filename: validator.html Supporting files: None --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validator</title> <script type='text/javascript'> function formValidator(){ // Make quick references to our fields var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var gpa = document.getElementById('gpa'); var phone = document.getElementById('phone'); // Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your first name")){ if(isAlphabet(lastname, "Please enter only letters for your last name")){ if(gpaValidator(gpa, "Please enter a valid G.P.A.")){ if(phoneValidator(phone, "Please put a valid phone number")){ return true; } } } } return false; } // Functions that check values in input fields! function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function gpaValidator(elem, helperMsg){ var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function phoneValidator(elem, helperMsg){ var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> </head> <body> <form onsubmit='return formValidator()'> <fieldset> <legend>Personal information:</legend><br /> First Name: <input type='text' id='firstname' /><br /> Last Name: <input type='text' id='lastname' /><br /> G.P.A.: <input type='text' id='gpa' /><br /> Phone Number: <input type='text' id='phone' /><br /> <input type='submit' value='Submit' /> </form> </body> </html> My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance
How to I create the following code... Code: #moving { position:absolute; float:right; top:100px; left:50px; } #movingword { position:absolute; float:right; top:0px; left:0px; } ... and this code ... Code: <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> ... programmatically using Javascript? (I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX) Here the full code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <title></title> <style type="text/css"> body { background-color:#000; } #scenery { position:relative; } #moving { position:absolute; float:right; top:100px; left:50px; } #movingword { position:absolute; float:right; top:0px; left:0px; } </style> <script type="text/javascript"> var t=125; var l=20; $(document).ready(function() { document.getElementById("movingword").style.top = t + "px"; document.getElementById("movingword").style.left = l + "px"; }); </script> </head> <body> <font color=white><h1> Hello World </h1></font> <div id="scenery"> <img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt=""> <div id="moving"> <img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt=""> </div> <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> </div> </body> </html> Hi everyone, I am using a jQuery cookie script to set the cookie of some elements on my website. One of the problems is that I need the cookie to not expire after one day, I need it to expire after a while (I'm going to start off with a year). Here's my script, the red part is what I've been editing. Code: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ /** * Create a cookie with the given name and value and other optional parameters. * * @example $.cookie('the_cookie', 'the_value'); * @desc Set the value of a cookie. * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secu true }); * @desc Create a cookie with all available options. * @example $.cookie('the_cookie', 'the_value'); * @desc Create a session cookie. * @example $.cookie('the_cookie', null); * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain * used when the cookie was set. * * @param String name The name of the cookie. * @param String value The value of the cookie. * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. * If set to null or omitted, the cookie will be a session cookie and will not be retained * when the the browser exits. * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will * require a secure protocol (like HTTPS). * @type undefined * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */ /** * Get the value of a cookie with the given name. * * @example $.cookie('the_cookie'); * @desc Get the value of a cookie. * * @param String name The name of the cookie. * @return The value of the cookie. * @type String * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */ jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000 * 365)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; Hello, I am using this code Code: <form style="display: none;" name="num1form" id="num1form" action=""> <input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/> </form> What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs. However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code: onclick="document.forms[0].action='javascript:ChangeNum1();'" at a time, for one form only. Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form? Thanks, Keenan I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() { runEffectB(); return false; }); What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. I am working on my shopping cart page with DOM. In my html I created two tables one for items with add buttons, and the other one for displaying how many items are added. So, here is my html codes Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="forms" /> <meta name="keywords" content="Client Side Programming, JavaScript, CSS" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <script type="text/javascript" src="shopping.js"></script> </head> <body> <h1>Central Valley Chocolates</h1> <h2>Gourmet Chocolates</h2> <table border="1" id="chocoateTrable"> <tr id="ch1"> <td>Chocolate Truffles</td><td>$34.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" /></td></tr> <tr id="ch2"> <td>Pecan</td><td>$14.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch2').rowIndex)" /></td></tr> <tr id="ch3"> <td>Truffles</td><td>$28.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch3').rowIndex)" /></td></tr> <tr id="ch4"> <td>caramel</td><td>$22.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch4').rowIndex)" /></td></tr> <tr id="ch5"> <td>Bark</td><td>$17.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch5').rowIndex)" /></td></tr> </table> <h2>Your Shopping Cart</h2> <table id="shoppingCart" border="1"> <tr><td>Your shopping cart is empty</td></tr> </table> <p id="total"> </p> </body> </html> And in my js file, I have two functions one for adding items and the other for deleting items. Code: var emptyCart = true; var salesTotal = 0; var curRow = 1; function addItem(selectedItem){ if(emptyCart == true){ document.getElementById('shoppingCart').deleteRow(0); emptyCart = false; } var curItem = document.getElementById("chocolateTable").rows[selectedItem].cells; var selectedItem = curItem[0].innerHTML; var itemPrice = curItem[1].innerHTML; var lastItem = document.getElementById("shoppingCart").rows.length; var cartTable = document.getElementById("shoppingCart"); var newRow = cartTable.insertRow(lastItem); document.getElementById("shoppingCart").rows[lastItem].id = "R" + curRow; var itemCell = newRow.insertCell(0); itemCell.innerHTML = selectedItem; var priceCell = newRow.insertCell(1); priceCell.innerHTML = itemPrice; var actionCell = newRow.insertCell(2); actionCell.innerHTML = "<input type='button' value = 'Remove' " + "onclick=\"removeItem('R"+curROw + "')\" />"; ++curRow; salesTotal += parseFloat(itemPrice.substring(1)); document.getElementById('total').innerHTML = "<strong>Sales total</strong>: $" + salesTotal.toFixed(2); } function removeItem(rowNum){ if(document.getElementById("shoppingCart").rows.length == 1){ document.getElementById("shoppingCart").rows[0].cells[0].innerHTML = "<td>Your shopping cart is empty</td>"; document.getElementById("shoppingCart").rows[0].cells[1].innerHTML = "<td>$0.00</td>"; document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2); emptyCart = true; } else{ var selectedRow = document.getElementById(rowNum).rowIndex; var itemPrice = document.getElementById("shoppingCart").rows[selectedRow].cells[1].innerHTML; document.getElementById("ShoppingCart").deleteRow(seletedRow); salesTotal = salesTotal - parseFloat(itemPrice.substring(1)); document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2); } } However, when I click add button to add each item, I don't see anything in my shoppingCart. Anyone can tell me what is wrong with my code? Hi and hope someone can help, I'm doing some course work on setting / getting cookies for a shopping cart. It basically works except the user can only select one item of each of the goods on offer i.e. you can only buy one cup (not two), one saucer etc. etc. I've deliberately not put a quantity field on the goods selection page and was hoping to modify my set cookie function so that if you've already selected one cup, the next tiume you select a cup, cups become 2 etc. etc. Here's my set cookie function. Notice that I've hard wired a "1" in there which I want to change to the variable for the number of cups. I've also commented out some of the first few lines which were experiments to resolve the problem. Code: function setCookie(name) { alert("Thank you.\n\nYour basket has been updated."); /* if(name.value !=0 || name.value==null) name.value++; x=getCookie(name) || 0; alert(document.cookie);*/ var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"= 1 ;expires="+expiry.toGMTString(); cart = document.cookie; } My thanks, R A little while later... I've cracked it, my function now looks like this and it appears to work... Code: function setCookie(name) { alert("Thank you.\n\nYour basket has been updated."); x=parseInt(getCookie(name)) || 0; alert(x); y=x+1; var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"="+y+";expires="+expiry.toGMTString(); cart = document.cookie; } Thanks you fror your interest, appreciated, R |