1,105,271 Community Members

HTML/JavaScript shopping cart help

Member Avatar
Rblalock
Newbie Poster
12 posts since Nov 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
Rblalock
Newbie Poster
12 posts since Nov 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Here is the coding...

<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>
cursed_mask
Newbie Poster
1 post since May 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
0
 

Thanks for the code.. This code works fine. But I want more help in it. How can I add a cart at the end of this, which will show details of product which have been ordered.

For example : I selected 2 copies of Dreamweaver and 2 copies of java. I have clicked on add to cart button. Both have been added in cart below. Now I want to cancel dreamweaver copy.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: