...

View Full Version : Javascript calculation help..



Anto
12-07-2006, 05:57 PM
Hi all,

I'll try to attach the javascript file?

First of all I have only about 4 hours experience with Javascript so please go easy on me.
I'm trying to build a pricing calculator for my website so that clients can price up items without ringing me all the time.
I downloaded a basic free calculator and throught a lot of trial and error I managed to get the first panel done (believe it or not but I was pretty proud of myself.. don't laugh)
The problem is with doing the next panel. I can paste the HTML from the first one down and change it to what I need. I can't get the javascript to control the second panel seperatley. I've tried copying the Javascript maths bit at the top in different ways but no luck. I renamed anything I could find that I thought related between The Javascript and the HTML..

What I really need to know is how to control the second panel and more panels is that's possible.

I hope I've explained myself ok..

Many thanks

Anto

david_kw
12-07-2006, 07:10 PM
The problem with your code is the button on the second panel is still looking at the information in the first panel and in fact updating the price on the first panel. In other words, the button in the second panel does exactly the same thing as the first one. You can test this by running yours and clicking the second panel button. It will put a price in the first panel.

So the solution is to make the code for each button look at a different panel. To do this I changed doMath() to take an argument which is the name of the panel you want to change. So the first panel button calls:

doMath('single');

and the second calls

doMath('Yleads');

Then the doMath will look in the correct form for the information as well as where to write the answer. While I was there I changed eval() to parseFloat() which is really what you want. I had to make a few other changes like to name the 3rd connector select element "con3" and add it to the doMath() but it checks to see if it exists for it adds it in.

Here is the changes I made. I tried to change as little as possible so there are some things done the way I wouldn't normally do them, but it seems to work.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function doMath(s) {
var form = document.getElementsByName(s)[0];
var one = parseFloat(form.con1.value);
var two = parseFloat(form.cable.value);
var three = parseFloat(form.length.value);
var four = parseFloat(form.con2.value);
var five = 0.0;
if (form.con3) {
five = parseFloat(form.con3.value);
}
var prod = (two * three) + one + four + five;

form.amount.value=custRound(prod,3);
}

function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}

// End -->


</SCRIPT>

</head>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>

<body bgcolor="#FFFFFF" text="#000000">
<CENTER>
<FORM NAME="single">
<table width="75%" border="1">
<tr>
<td height="490"><div align="center">
<table width="75%" border="0">
<tr>
<td width="22%">&nbsp;</td>
<td width="53%"><div align="center"><font color="#333333" size="+1"></font></div></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="75%" border="0">
<tr>
<td><div align="center"><font color="#333333" size="5" face="Geneva, Arial, Helvetica, sans-serif">Single
Cables</font></div></td>
</tr>
</table>
<table width="75%" border="1" bgcolor="#333333">
<tr>
<td height="84"><div align="center">
<table width="673" height="120" border="0" cellspacing="0">
<tr>
<td height="18" valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector
type (1) </strong></font></div></td>
<td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Cable
Type </strong></font></div></td>
<td valign="bottom"><p align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Lenght
per mtr. </strong></font></p></td>
<td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector
type (2) </strong></font></div></td>
</tr>
<tr valign="top">
<td height="26"> <div align="center">
<select name="con1">
<option value="5.73" selected>Male XLR</option>
<option value="6.26">Female XLR</option>
<option value="6.83">Stereo Jack (TRS)</option>
<option value="5.70">Mono Jack</option>
<option value="4.05">Phono (RCA)</option>
<option value="4.05">Minijack</option>
</select>
</div></td>
<td><div align="center">
<select name="cable">
<option value="2.05">Gotham GAC-3</option>
<option value="1.05">Cordial CMK222</option>
</select>
</div></td
>
<td><div align="center">
<input name="length" type="text" size="5">
</div></td>
<td><div align="center">
<select name="con2">
<option value="5.73" selected>Male XLR</option>
<option value="6.26">Female XLR</option>
<option value="6.83">Stereo Jack (TRS)</option>
<option value="5.70">Mono Jack</option>
<option value="4.05">Phono (RCA)</option>
<option value="4.05">Minijack</option>
</select>
</div></td>
</tr>
<tr>

<td height="71">&nbsp; </td>
<td> <div align="center">
<input type="button" value="Calculate" onClick="doMath('single')" name="button">
</div></td>
<td><div align="right"><strong><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">Total----</font></strong>
</div></td>
<td><div align="center">
<input name="amount" type="text" size="10">
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</FORM>

<FORM NAME="Yleads">
<table width="75%" border="1">
<tr>
<td height="490"><div align="center">
<table width="75%" border="0">
<tr>
<td width="22%">&nbsp;</td>
<td width="53%"><div align="center"><font color="#333333" size="+1"></font></div></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="75%" border="0">
<tr>
<td><div align="center"><font color="#333333" size="5" face="Geneva, Arial, Helvetica, sans-serif">Yleads</font></div></td>
</tr>
</table>
<table width="75%" height="214" border="1" bgcolor="#333333">
<tr>
<td height="170"><div align="center">

<table width="673" height="157" border="0" cellspacing="0">
<tr>
<td height="26" valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector
type (1) </strong></font></div></td>
<td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Cable
Type </strong></font></div></td>
<td valign="bottom"><p align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Lenght
per mtr. </strong></font></p></td>
<td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector
type (2) </strong></font></div></td>
</tr>
<tr valign="top">
<td height="26"> <div align="center">
<select name="con1">
<option value="5.73" selected>Male XLR</option>
<option value="6.26">Female XLR</option>
<option value="6.83">Stereo Jack (TRS)</option>
<option value="5.70">Mono Jack</option>
<option value="4.05">Phono (RCA)</option>
<option value="4.05">Minijack</option>
</select>
</div></td>
<td><div align="center">
<select name="cable">
<option value="2.05">Gotham GAC-3</option>
<option value="1.05">Cordial CMK222</option>
</select>
</div></td
>
<td><div align="center">
<input name="length" type="text" size="5">
</div></td>
<td><div align="center">
<select name="con2">
<option value="5.73" selected>Male XLR</option>
<option value="6.26">Female XLR</option>
<option value="6.83">Stereo Jack (TRS)</option>
<option value="5.70">Mono Jack</option>
<option value="4.05">Phono (RCA)</option>
<option value="4.05">Minijack</option>
</select>
</div></td>
</tr>
<tr>
<td height="71" rowspan="4">&nbsp; </td>
<td rowspan="4"> <div align="center">
<input type="button" value="Calculate" onClick="doMath('Yleads')" name="button">
</div></td>
<td height="21"><div align="right"><strong></strong> </div></td>
<td><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector
type (3) </strong></font></div></td>
</tr>
<tr>
<td height="26"><div align="center"></div></td>
<td><div align="center">
<select name="con3">
<option value="5.73" selected>Male XLR</option>
<option value="6.26">Female XLR</option>
<option value="6.83">Stereo Jack (TRS)</option>
<option value="5.70">Mono Jack</option>
<option value="4.05">Phono (RCA)</option>
<option value="4.05">Minijack</option>
</select>
</div></td>
</tr>
<tr>
<td height="21"><div align="right"><strong></strong></div></td>
<td> <div align="center"></div></td>
</tr>
<tr>
<td height="13"><div align="right"><strong><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">Total----</font></strong></div></td>
<td> <div align="center">
<input name="amount" type="text" size="10">
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</FORM>

</CENTER>


</body>
</html>


david_kw

Anto
12-07-2006, 09:57 PM
Thanks so much for your responses. I'm going to have a look at both of them now.
I really appriciate this...

Anto



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum