HTML/JavaScript shopping cart help

Expand Post »

Hello, I'm new to the DaniWeb community and I am in need of some serious help. I am taking a web design class, but the teacher I currently have now has no idea what he is doing; he is an Info Tech teacher, but we have two classes at the same time.

I have to create a shopping cart for my class, and I you can tell, I have no idea how to create a shopping cart with HTML and JavaScript.

I do not have any money to give for anyone's help, but if anyone thinks they might be able to help me create it, I will send them the coding I have at this moment.

Similar Threads

Can anybody recommend the best shopping cart software ? in eCommerce
Shopping cart in PHP
Shopping Cart Not Working in ASP.NET
Simple Shopping Cart with arrays in PHP

Rblalock

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Nov 2009

Permalink

Nov 8th, 2009

Re: HTML/JavaScript shopping cart help

Here is the coding...

html Syntax (Toggle Plain Text)
<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
 
<style type="text/css" media="all"> 
 
/* Ryan Blalock (ShoppingCart.htm)
9/29/09 */
 
body {
background: transparent url(images/bg.gif) repeat left top; }
 
table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }
 
td#header {
font-size: 16pt;
text-align: center; }
 
td, th {
padding: .3em; }
 
td.align {
vertical-align: top; }
 
h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }
 
.center {
text-align: center; }
 
tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }
 
tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }
 
tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }
 
td#body {
color: black;
background-color: #FFF;
text-align: justify; }
 
button {
margin-left: 1em; }
 
</style>
 
<script type="text/javascript"> 
 
var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif", "images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif", "images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif", "images/clock/cpm.gif", "images/clock/colon.gif"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}
 
	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" /> '+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" /> '
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" /> '+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" /> '
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" /> '+sections[1]+'<img src="'+imageclock.digits[12]+'" /> '+sections[2]
	}
 
	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"> </span> ')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}
 
	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML
 
	}
 
function checkForm1() {
  if (document.form1.prod.selectedIndex == 0)
    {alert ("Select literature");
     return false;}
  else if (document.form1.qty.selectedIndex == 0)
    {alert ("Select quantity");
     return false;}
  else if (document.form1.ship.value == "0.00")
    {alert ("Select a shipping option");
     return false;}
  else return true;
}
 
</script>
</head>
 
<body>
<div class="center">
 
<table border="0">
<tr id="header">
  <td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript"> 
 
new imageclock.display()
 
</script>
</td></tr>
<tr id="nav">
 
<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>
 
</tr>
<tr>
 
<td id="body">E-mail us at: 
<b><script type="text/javascript"> 
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>
 
<tr>
  <td id="body" colspan="2"><br /><p>Welcome to the Moultrie Tech - Worth County- campus bookstore.  Located on this page, you will find all the literature needed for the Moultrie Tech classes given at the Moultrie Tech - Worth Campus.  If, for some reason, the literature that you need is not available on this page, please try the other Moultrie Tech campuses' bookstores.  Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p>
 
<p><strong><u>Web Design Literature</u></strong></p>
 
<p><img src="HTML.jpg" alt="Quarter One:  HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives:  JavaScript <strong>$63.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<br />
<br />
 
<p><strong><u>Info Tech Literature</u></strong></p>
 
 
 
<p><strong><u>Cosmetology</u></strong></p>
 
 
 
 
<tr id="black">
  <td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
 
<style type="text/css" media="all"> 
 
/* Ryan Blalock (ShoppingCart.htm)
9/29/09 */
 
body {
background: transparent url(images/bg.gif) repeat left top; }
 
table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }
 
td#header {
font-size: 16pt;
text-align: center; }
 
td, th {
padding: .3em; }
 
td.align {
vertical-align: top; }
 
h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }
 
.center {
text-align: center; }
 
tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }
 
tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }
 
tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }
 
td#body {
color: black;
background-color: #FFF;
text-align: justify; }
 
button {
margin-left: 1em; }
 
</style>
 
<script type="text/javascript"> 
 
var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif", "images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif", "images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif", "images/clock/cpm.gif", "images/clock/colon.gif"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}
 
	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
	}
 
	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"></span>')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}
 
	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML
 
	}
 
function checkForm1() {
  if (document.form1.prod.selectedIndex == 0)
    {alert ("Select literature");
     return false;}
  else if (document.form1.qty.selectedIndex == 0)
    {alert ("Select quantity");
     return false;}
  else if (document.form1.ship.value == "0.00")
    {alert ("Select a shipping option");
     return false;}
  else return true;
}
 
</script>
</head>
 
<body>
<div class="center">
 
<table border="0">
<tr id="header">
  <td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript"> 
 
new imageclock.display()
 
</script>
</td></tr>
<tr id="nav">
 
<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>
 
</tr>
<tr>
 
<td id="body">E-mail us at: 
<b><script type="text/javascript"> 
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>
 
<tr>
  <td id="body" colspan="2"><br /><p>Welcome to the Moultrie Tech - Worth County- campus bookstore.  Located on this page, you will find all the literature needed for the Moultrie Tech classes given at the Moultrie Tech - Worth Campus.  If, for some reason, the literature that you need is not available on this page, please try the other Moultrie Tech campuses' bookstores.  Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p>
 
<p><strong><u>Web Design Literature</u></strong></p>
 
<p><img src="HTML.jpg" alt="Quarter One:  HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives:  JavaScript <strong>$63.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<br />
<br />
 
<p><strong><u>Info Tech Literature</u></strong></p>
 
 
 
<p><strong><u>Cosmetology</u></strong></p>
 
 
 
 
<tr id="black">
  <td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>

Last edited by peter_budo; Nov 13th, 2009 at 5:31 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

Rblalock

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Nov 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: help with css textarea

Next Thread in HTML and CSS Forum Timeline: Problem with larger image than I want

DaniWeb Message

Cancel Changes

User Name
Password