AJAX

Simple Math + Javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2005

Posts: 4

Reputation: LiveWire is an unknown quantity at this point

Solved Threads: 0

LiveWire

Offline

Newbie Poster

Simple Math + Javascript

Jun 23rd, 2006

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!

•

Join Date: Jul 2005

Posts: 483

Reputation: campkev is an unknown quantity at this point

Solved Threads: 19

campkev

Offline

Posting Pro in Training

Re: Simple Math + Javascript

Jun 23rd, 2006

here's something to get you started.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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>

•

Join Date: Jun 2005

Posts: 4

Reputation: LiveWire is an unknown quantity at this point

Solved Threads: 0

LiveWire

Offline

Newbie Poster

Re: Simple Math + Javascript

Jun 24th, 2006

Thank you campkev, I will study the code.

Last edited by LiveWire; Jun 24th, 2006 at 12:42 am.

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Simple Math + Javascript

Jul 3rd, 2006

•

Originally Posted by 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!

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:
[HTML]
<input type="checkbox" name="mycbox" id="mycbox" />
[/HTML]

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():

[HTML]
var mycheckbox = document.getElementById('mycbox');
[/HTML]

Then I can attach the event handler function to the checkbox:
[HTML]
mycheckbox.onclick = checkboxHandler;

function checkboxHandler() {
// function code goes here
}
[/HTML]

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:
[HTML]<b>This is some bold text</b>[/HTML]

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.
[HTML]<b>New HTML</b>[/HTML]

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:
[HTML]<b id="boldtext">This is some bold text</b>[/HTML]

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

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

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

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

Hope that helps clarify some of the JS...

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!