[Auto-Calculation in forms?]

[Foxcom]

Hey Guys,

As you'll notice im trying to put together a invoice/quote script, Although im stumped on getting the forms to automaticly calculate.

Example:
i need the cost input box to multiply by qty and output result in the subtotal inputbox (qcost1 x qn1 = qsub1) then add all the sub's togther to get the result in the total input box (qsub1 + qsub2+ qsub3 = qtotal)



Qty
Cost
Subtotal


qn1
qcost1
qsub1


qn2
qcost2
qsub3


etc..



My code:

<table border='1' width='57%' style='border-width: 0px' height='42%' cellspacing='3' cellpadding='3'>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<font face="Tahoma" size="2">
Description</font></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<font face="Tahoma" size="2">Qty/Hrs</font></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<font face="Tahoma" size="2">Cost</font></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<p align="left">
<font face="Tahoma" size="2">Sub-Total</font></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem1" type="text" id="qitem1" value="<? echo $rows['qitem1']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn1" type="text" id="qn1" value="<? echo $rows['qn1']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost1" type="text" id="qcost1" value="<? echo $rows['qcost1']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub1" type="text" id="qsub1" value="<? echo $rows['qsub1']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem2" type="text" id="qitem2" value="<? echo $rows['qitem2']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn2" type="text" id="qn2" value="<? echo $rows['qn2']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost2" type="text" id="qcost2" value="<? echo $rows['qcost2']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub2" type="text" id="qsub2" value="<? echo $rows['qsub2']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem3" type="text" id="qitem3" value="<? echo $rows['qitem3']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn3" type="text" id="qn3" value="<? echo $rows['qn3']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost3" type="text" id="qcost3" value="<? echo $rows['qcost3']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub3" type="text" id="qsub3" value="<? echo $rows['qsub3']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem4" type="text" id="qitem4" value="<? echo $rows['qitem4']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn4" type="text" id="qn4" value="<? echo $rows['qn4']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost4" type="text" id="qcost4" value="<? echo $rows['qcost4']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub4" type="text" id="qsub4" value="<? echo $rows['qsub4']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem5" type="text" id="qitem5" value="<? echo $rows['qitem5']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn5" type="text" id="qn5" value="<? echo $rows['qn5']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost5" type="text" id="qcost5" value="<? echo $rows['qcost5']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub5" type="text" id="qsub5" value="<? echo $rows['qsub5']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem6" type="text" id="qitem6" value="<? echo $rows['qitem6']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn6" type="text" id="qn6" value="<? echo $rows['qn6']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost6" type="text" id="qcost6" value="<? echo $rows['qcost6']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub6" type="text" id="qsub6" value="<? echo $rows['qsub6']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="757" style="border-style: none; border-width: medium">
<input name="qitem7" type="text" id="qitem7" value="<? echo $rows['qitem7']; ?>" size="107"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qn7" type="text" id="qn7" value="<? echo $rows['qn7']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qcost7" type="text" id="qcost7" value="<? echo $rows['qcost7']; ?>" size="12"></td>
<td align="left" width="92" style="border-style: none; border-width: medium">
<input name="qsub7" type="text" id="qsub7" value="<? echo $rows['qsub7']; ?>" size="12"></td>
</tr>
<tr>
<td align="left" width="1062" colspan="4" height="36" style="border-style: none; border-width: medium">
<div align="right" style="a: none; border: medium none">
<table border="1" width="13%" style="border-width: 0px">
<tr>
<td width="86" style="border-style: none; border-width: medium">
<b>
<font size="4" face="Tahoma" color="#2A2A2A">
Total;</font></b></td>
<td style="border-style: none; border-width: medium">
<b>
<font size="4" face="Tahoma">
$</font></b></td>
<td width="61" style="border-style: none; border-width: medium">
<p align="right">
<input name="qtotal" type="text" id="qtotal" value="<? echo $rows['qtotal']; ?>" size="12"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
It would be great if you could modify the code above to work, I've searched through google many of times and have not been able to integrate it into my script.

Thankyou Muchly,
Chris!

[scottish]

You should find plenty of results in google, you'd use javascript.

Something like


$('input').blur(function(){
var quantity = $('input[name="qn1"]').val();
var cost = $('input[name=qcost1"]').val();
var sub = quantity * cost;

$('input[name="qsub1"]').val(sub)
});

i'd imagine and then obviously do appropriate checks to check somethings actually entered, it's valid etc. then loop through qn/qcost as necessary.

[Dentafrice]

You'd also want to convert those strings to integers to actually perform math on them. parseInt(val, 10).

[Foxcom]

Hello Guys,

Thank you for the replies.

Although i currently have this sorted.

Thanks Anyway,
Chris.

[Dentafrice]

Hi Guys,

I was posting this for other people to read as this thread will remain on the site and would hate to see anyone actually doing multiplication on strings (although it would work).

Thanks Anyway,
Caleb.