Member Avatar for LiveWire

Hey guys, I thought I figured it out but I didn't. I decided to create an admimated gif of what I'm looking to do. Could someone help me out and get me going in the right direction? A Basic HTML code would be great as I know really nothing about JavaScript. Thanks in advanced!


[img]http://www.vbhackers.com/gear/javahelp.gif[/img]

  • 3 Contributors
  • 3 Replies
  • 158 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by digital-ether

Recommended Answers

All 3 Replies

Member Avatar for campkev

here's something to get you started.

<html>
<head>
<title>Our Products</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css"> 
	.submenu { padding-left:15px;}
		</style>
<script type="text/javascript">
<!--



function addItem(cb){

if(document.getElementById){
var elAmt = document.getElementById('Amt');
var elExtra = document.getElementById('extraAmt');
var elSub = document.getElementById('subAmt');
var elTax = document.getElementById('taxAmt');
var elTotal = document.getElementById('totAmt');
		var amount = parseFloat(elAmt.innerHTML);
		if(cb.checked){
		elExtra.innerHTML = "4.99";
		elSub.innerHTML = amount + 4.99;
		elTax.innerHTML = (amount + 4.99) * .06;
		elTotal.innerHTML = ((amount + 4.99) * 1.06);
		}
		else{
		elExtra.innerHTML = "0.00"
		elSub.innerHTML = "10.00"
		elTax.innerHTML = "0.60"
		elTotal.innerHTML = "10.60";
		}
	}
}


-->
</script>
</head>
<body>
<p><b>ProductList</b></p>

<br>
<br>
Product Information:

<table>
<tr><td>Item Description</td><td id='Amt'>10.00</td></tr>
<tr><td><input type=checkbox name=mType onclick="addItem(this)" value="prod3">Add extra product for 4.99</td><td id='extraAmt'>0.00</td></tr>
<tr><td>subtotal</td><td id='subAmt'>10.00</td></tr>
<tr><td>sales tax</td><td id='taxAmt'>0.60</td></tr>
<tr><td>grand total</td><td id='totAmt'>10.60</td></tr>
</table></form>
</body></html>
Member Avatar for LiveWire

Thank you campkev, I will study the code.

Member Avatar for digital-ether

Hey guys, I thought I figured it out but I didn't. I decided to create an admimated gif of what I'm looking to do. Could someone help me out and get me going in the right direction? A Basic HTML code would be great as I know really nothing about JavaScript. Thanks in advanced!


[img]http://www.vbhackers.com/gear/javahelp.gif[/img]

Hi LiveWire,

Heres a few basics that should help you out.

What you want to do is attach an event handler (function) to the checkbox. This event handler is then executed when the Checkbox is clicked.

Note: There are different types of event handlers in javascript, here you just want the 'onclick' event handler.

When the checkbox is clicked, the onclick event is fired for the checkbox.
Since we have specified a function to be executed (the event handler) when the checkbox is clicked, the function will be executed.

In our event handler, we will add the "feature price" to the total price of the Item, and then display it in the HTML of the page.

Example:

Say for example you have your checkbox:

<input type="checkbox" name="mycbox" id="mycbox" />

Notice I have given it an id to make the js easier.

To get a reference to our checkbox I use the JavaScript function getElementById():

var mycheckbox = document.getElementById('mycbox');

Then I can attach the event handler function to the checkbox:

mycheckbox.onclick = checkboxHandler;

function checkboxHandler() {
    // function code goes here
}

onclick is a property of all html elements. Here I have a reference to the checkbox html element via "mycheckbox". In JS properties have the syntax: object.property
So mycheckbox.onclick = checkboxHandler; sets the onclick property of mycheckbox to checkboxHandler, which is a function.

onclick is a special property which will be accessed when ever a user clicks on an object that has that property (eg: HTML Elements).

In your onclick even handler function you will have code to add/subtract the amount you need from the total amount.
This is quite simple math... :)

After the math, you have to change the display of the amounts in html.
There are different ways to do this, the recommended way is using the Document Object Module (W3C DOM) but to make things simple you can use innerHTML.

This is the property of an HTML Element which holds the HTML it contains.

eg:

<b>This is some bold text</b>

the html element <b> has the property innerHTML of the value "This is some bold text".

If you were to set the innerHTML property of <b> to "New HTML" then the html inside <b> will change to that value, and show up on the browser as such.

<b>New HTML</b>

In order to change the innerHTML of an HTML Element, you need to get a reference to that element. The easiest way is to create an id property for that element.

EG:

<b id="boldtext">This is some bold text</b>

Now you can reference the <b> element using its id, "boldtext" with the function document.getElementById('boldtext');

eg:

<b id="boldtext">This is some bold text</b>
<script>
var b = document.getElementById('boldtext');
</script>

So changing the Inner HTML of <b> to "New HTML" would be:

<b id="boldtext">This is some bold text</b>
<script>
var b = document.getElementById('boldtext');
b.innerHTML = "New HTML";
</script>

Hope that helps clarify some of the JS...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.