Funtion with Form Elements help

[recsx]

Hi all.

I've been raking my brain on this one for days, i know a little of Javascript to get arround, but cant figure this one out.

I know what i want to do and i know a little of what needs to be done but what i have is not working.

I am trying to make an Online Invoice form for personal use and need help with the calculations.

I've writen some code that was working fine but was way too long.

This is what my form looks like...

[price] x [qty] = [extended]

and i have about 20 lines of this each line is named like this.
price1, qty1, extended1
price2, qty2, extended2

so on and so forth, e.g. these are the field names.

Now, i have been trying to create a function that will enable each line to use one function by accessing the elements names.
e.g. in the input tag something like onKeyUp="this.form.price1.value,this.form.qty1.value" and possibly send this to the function like this
function Calculate(Price,Qty)

but i want it so that the function can calculate all 20 line only when the user enters data into it.

Does any one have any ideas.

If i was not clear on what i am trying to do please let me know so that i can try to explain again.

Thanks a bunch.

 

[BillyRayPreachersSon]

This should be no problem to do with one function. OnKeyUp (or whenever you wish), call the function with the element name. In the function, strip off the prefix, which will give you the element number, and then you should be home and dry.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[recsx]

Give me a dry run example, cause what i tried did not work.

Example

function Calculate(FormName,Line,Price,Qty){
// FormName is the name of the form
// Line is the extended field e.g. extended1 sent with the argument
// Price is referenced to the price1 or price2 field
// So on and so on
}

here is what i have

function Calculate(Line,Price,Qty){

Price1 = Number(Price1);
Qty = Number(Qty);
Extended1 = (Price1 * Qty);

var Extended = Math.round(Extended1 * Math.pow(10,2))/Math.pow(10,2);

if(Extended > "0"){
document.forms[FormName].elements[Line].value = Extended;
}else{
document.forms[FormName].elements[Line].value = "";
}
}

The Form...
<FORM NAME="Invoice">
<INPUT NAME="price1" onKeyUp="Calculate('Invoice',this.form.price1.value;,this.form.qty1.value);">
<INPUT NAME="qty1" onKeyUp="Calculate('Invoice',this.form.price1.value;,this.form.qty1.value);">
<INPUT NAME="extended1">

<INPUT NAME="price2" onKeyUp="Calculate('Invoice',this.form.price2.value;,this.form.qty2.value);">
<INPUT NAME="qty2" onKeyUp="Calculate('Invoice',this.form.price2.value;,this.form.qty2.value);">
<INPUT NAME="extended2">
</FORM>

 

[recsx]

Sorry i made a mistake in the post.
The function should also have the FormName argument in it.
I forgot to enter this when i posted this is in my original script.

Thanks

 

[trollacious]

In your form, why do you use semicolons INSIDE the function calls in the event handlers? That's a sure way to make things not work.

Lee

 

[recsx]

When i don't put them in i get an error.

Man i've been doing allot of PHP for the past few years and have not done much JavaScript, but i sure remember quickly why i hated it.

In PHP if you have an error in the code it points it out point blank where the problem is, but with JavaScript and IE i don't get how they evaluate the code cause it's all over the place.

It's like looking for a needle in a hay stack.

 

[trollacious]

This:

<INPUT NAME="price1" onKeyUp="Calculate('Invoice',this.form.price1.value[red];[/red],this.form.qty1.value);">

can't possibly work correctly. If you stuck an unquoted semicolon in the middle of a PHP function call, you'd get an error, too, so you can't POSSIBLY think this makes any sense.

Lee

 

[recsx]

Ok i thought it was wrong and knew it looked wrong but thats fine.

But this is not the problem.

I cant remember how to reference a field to a function argument.

function blabla(this,that,andthis)

oh do i send a field pointer to this function and call it within the script?

e.g. document.form.elements[that].value
e.g. that to reference the variable in the functiona call?

 

[BillyRayPreachersSon]

Change this:

<INPUT NAME="price1" onKeyUp="Calculate('Invoice',this.form.price1.value;,this.form.qty1.value);">

to this:

<input name="price1" onKeyUp="Calculate('Invoice', this.name);">

and then in the Calculate function, strip off the first 5 digits of the parameter ("price"), leaving you with the row number. Then you can simply access all the relevant form fields using that number as a base. This is exactly what I described in my earlier post.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

In fact, if the first parameter is always 'Invoice', then you don't need to pass it at all - it is redundant.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[recsx]

I've done it.

I've accomplished what i was trying to do thanks to the help of this great forum.

Thanks guys.

Here is my entire HTML file along with the script.
I did not add all 20 lines in the invoice yet but you get the picture, it now works as it should and with the ability to add and remove as many lines(rows) as you like without having to point to specific fields.



CODE::

<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Language" CONTENT="en-us">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="css/default.css">
<TITLE>Logo</TITLE>
</HEAD>

<BODY>
<?
$HeaderBGcolor1 = "9DAFFF";
?>

<SCRIPT Language="JavaScript">
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}


function RowItemCalc(FormName,RowNum){
RowNum = RowNum.toString().replace(/[^0-9]*/,'');

price = 'price'+RowNum;
qty = 'qty'+RowNum;
gst_rate = 'gst_rate'+RowNum;
gst_tot = 'gst_tot'+RowNum;
pst_rate = 'pst_rate'+RowNum;
pst_tot = 'pst_tot'+RowNum;
extended = 'extended'+RowNum;

CalcExtended = (FormName.elements[price].value * FormName.elements[qty].value);
var CalcExtended = Math.round(CalcExtended * Math.pow(10,2))/Math.pow(10,2);

if(CalcExtended > '0'){
FormName.elements[extended].value = CalcExtended;
}else{
FormName.elements[extended].value = '';
}

CalcGSTRate = (FormName.elements[gst_rate].value * FormName.elements[extended].value);
var CalcGSTRate = Math.round(CalcGSTRate * Math.pow(10,2))/Math.pow(10,2);
if(CalcGSTRate > '0'){
FormName.elements[gst_tot].value = CalcGSTRate;
}else{
FormName.elements[gst_tot].value = '';
}

CalcPSTRate = (FormName.elements[pst_rate].value * FormName.elements[extended].value);
var CalcPSTRate = Math.round(CalcPSTRate * Math.pow(10,2))/Math.pow(10,2);
if(CalcPSTRate > '0'){
FormName.elements[pst_tot].value = CalcPSTRate;
}else{
FormName.elements[pst_tot].value = '';
}
}
</SCRIPT>


<FORM NAME="Invoice" METHOD="POST" ACTION="">
<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>
<TD WIDTH="375">Logo</TD>
<TD>
<TABLE BORDER="1" WIDTH="375" CELLPADDING="0" CELLSPACING="0" CLASS="TableStyle1">
<TR>
<TD WIDTH="150" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Invoice #:</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Date:</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Per Quote #:</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

<BR>

<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>

<TD ALIGN="left">
<TABLE BORDER="1" WIDTH="374" CELLPADDING="0" CELLSPACING="0" CLASS="TableStyle1">
<TR>
<TD WIDTH="374" COLSPAN="4" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Sold To:</TD>
</TR>
<TR>
<TD WIDTH="80" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;First Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Last Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Company Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Address:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;City/Town:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD WIDTH="80" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Province/State:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Country:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Postal/Zip Code:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Phone:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Fax:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
</TABLE>
</TD>

<TD ALIGN="right">
<TABLE BORDER="1" WIDTH="374" CELLPADDING="0" CELLSPACING="0" CLASS="TableStyle1">
<TR>
<TD WIDTH="374" COLSPAN="4" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Ship To:</TD>
</TR>
<TR>
<TD WIDTH="80" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;First Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Last Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Company Name:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Address:</TD>
<TD COLSPAN="3"><INPUT TYPE="text" SIZE="50" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;City/Town:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD WIDTH="80" BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Province/State:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Country:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Postal/Zip Code:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Phone:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Fax:</TD>
<TD><INPUT TYPE="text" SIZE="17" NAME="" CLASS="MyFields"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

<BR>

<TABLE BORDER="1" WIDTH="750" CELLPADDING="0" CELLSPACING="0" ALIGN="center" CLASS="TableStyle1">
<TR>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Ship Via</TD>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">FOB</TD>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">P.O. #</TD>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Terms</TD>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Salesperson</TD>
<TD ALIGN="center" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Page</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>

<BR>

<TABLE BORDER="1" WIDTH="750" CELLPADDING="0" CELLSPACING="0" ALIGN="center" CLASS="TableStyle1">
<TR>
<TD ALIGN="center" WIDTH="50" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Item</TD>
<TD ALIGN="center" WIDTH="310" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Item Description</TD>
<TD ALIGN="center" WIDTH="60" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Price</TD>
<TD ALIGN="center" WIDTH="50" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Qty.</TD>
<TD ALIGN="center" WIDTH="60" BGCOLOR="#<?echo $HeaderBGcolor1;?>">Extended</TD>
<TD ALIGN="center" WIDTH="50" BGCOLOR="#<?echo $HeaderBGcolor1;?>">GST</TD>
<TD ALIGN="center" WIDTH="50" BGCOLOR="#<?echo $HeaderBGcolor1;?>">PST</TD>
<TD ALIGN="center" WIDTH="60" BGCOLOR="#<?echo $HeaderBGcolor1;?>">GST Tot</TD>
<TD ALIGN="center" WIDTH="60" BGCOLOR="#<?echo $HeaderBGcolor1;?>">PST Tot</TD>
</TR>
<TR>
<TD><INPUT TYPE="text" SIZE="8" NAME="item1" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="60" NAME="itemdesc1" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="price1" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="qty1" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="extended1" READONLY CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="gst_rate1" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="pst_rate1" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="gst_tot1" READONLY CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="pst_tot1" READONLY CLASS="MyFields"></TD>
</TR>
<TR>
<TD><INPUT TYPE="text" SIZE="8" NAME="item2" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="60" NAME="itemdesc2" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="price2" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="qty2" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="extended2" READONLY CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="gst_rate2" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="8" NAME="pst_rate2" onKeyUp="RowItemCalc(this.form, this.name)" CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="gst_tot2" READONLY CLASS="MyFields"></TD>
<TD><INPUT TYPE="text" SIZE="10" NAME="pst_tot2" READONLY CLASS="MyFields"></TD>
</TR>
</TABLE>

<BR>

<TABLE BORDER="0" WIDTH="750" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>
<TD>Notes:<BR>
<TEXTAREA ROWS="2" NAME="S1" COLS="20"></TEXTAREA>
</TD>
<TD>Thank you for choosing<BR>
This Company<BR>
please come again.</TD>
<TD WIDTH="150">

<TABLE BORDER="1" WIDTH="150" CELLPADDING="0" CELLSPACING="0" ALIGN="center" CLASS="TableStyle1">
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Subtotal:</TD>

<TD WIDTH="50"><INPUT TYPE="text" SIZE="10" NAME="subtotal" READONLY CLASS="MyFields"></TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;GST:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;PST:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Shipping:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Total:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Deposit:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#<?echo $HeaderBGcolor1;?>">&nbsp;Balance:</TD>
<TD WIDTH="50">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

</FORM>

</BODY>

</HTML>