How can I get cells to add up automatically in a form

[Dave Cotton]

Hi List

I’m looking for a script that will fit in an existing form. This is an order form and I would like the visitor to fill in maybe 3 fields in any number of lines, which would automatically be added up in the end column!

Then the all the amounts in the end column would be added to make a total.

Is there a piece of software or an addin for doing this?

I am using FP2K and my server as installed all extns

Many thanks to anyone who can advise

Kind regards

Dave C

[HairyTeeth]

Hi,
The code for the form would be handy.

[Dave Cotton]

Hi Hairy Teeth
Thanks for your response.

Do you mean the HTML code? This is just the basic form boxes.
One line form boxes, nothing special.

ie. Part No Quantity Description Unit Price Totals

[sage45]

Here is one that I used... Must warn you though... 'Tis a very long script:


<SCRIPT LANGUAGE="JavaScript">

//-- Global Variables
var RowsInForm = 7 //How many line items will be in the order form?
var ProductsInList = 34 //How many products in your product list?
var ProdSubscript = 0 //Identifies subscript of selected product in current row.

//-- Function to create a new empty array that starts at 1.
function MakeArray(n) {
this.length = n
for (var i=1;i<=n;i++) {this[i]=0}
return this
}

//-- Function to create a new, empty array that starts at zero.
function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this[i]=0}
return this
}

//-- Defines a custom object named prodobj (Product Object).
//-- An array of these objects will act as our product/price list.
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}

//-- Defines a new custom object named ordobj (Order Object).
//-- Will house data displayed in order form line items.
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}

//-- Validation Script for use with selecting a quantity.
function validate(field) {
var valid = "0123456789"
var ok = "yes";
var temp;
for (var i=0; i<field.value.length; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") ok = "no";
}
if (ok == "no") {
alert("Invalid Entry! You must enter a quantity for your selected item. If you do not want this item please hit cancel.");
field.focus();
field.select();
return false;
}
}

function clearField(rownum) {
var exeLine='document.ordform.prodchosen'+rownum+'.selectedIndex="0"'
eval(exeLine)
}

//-- Updates row in order array and form.
function updateRow(rownum){
var exeLine='ProdSubscript=document.ordform.prodchosen'+rownum+'.selectedIndex'
eval(exeLine)
ordData[rownum].prodsub=ProdSubscript
var exeLine='tempqty=document.ordform.qty'+rownum+'.value'
eval(exeLine)
ordData[rownum].qty=tempqty-0
//-- Gets unit price from the product price list.
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice=(ordData[rownum].qty)*ordData[rownum].unitprice
var exeLine='document.ordform.unitprice'+rownum+'.value=currency(ordData['+rownum+'].unitprice,10)'
eval (exeLine)
var exeLine='document.ordform.extprice'+rownum+'.value=currency(ordData['+rownum+'].extprice,10)'
eval(exeLine)
updateTotals()
}

//-- Updates the totals in the lower part of order details.
function updateTotals() {
var subtotal = 0
for (var i=1;i<=RowsInForm;i++) {
subtotal=subtotal+ordData[i].extprice
}
document.ordform.subtotal.value = currency(subtotal,10)
}

//-- Shows number in $$xxx,xxx.xx format and pads left side with blanks.
function currency(anynum,width) {
anynum=eval(anynum)
workNum=Math.abs((Math.round(anynum*100)/100));workStr=""+workNum
if (workStr.indexOf(".")==-1){workStr+=".00"}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=dStr-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}

//--- Adds comma in thousands place.
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}

//-- Adds comma in millions place.
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval=dStr+pStr
if (anynum < 0) {
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "$"+retval
//--Pad with leading blanks to better align numbers.
while (retval.length<width){retval=" "+retval}

return retval
}

function formClear() {
name = "";
unitprice = "";
prodsub = "";
unitprice = "";
extprice = "";
subtotal = "";
anynum = "";
ProdSubscript = "";
var exeLine='document.ordform.reset()'
eval(exeLine)
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
prodlist = new BuildZeroArray(ProductsInList) //Create empty product list array.
//-- Do not change first item (prodobj[0]).
prodlist[0] = new prodobj('',0)
prodlist[1] = new prodobj('Product 1',0)
prodlist[2] = new prodobj('Product 2',1800.00)
prodlist[3] = new prodobj('Product 3',2100.00)
prodlist[4] = new prodobj('Product 4',2600.00)
prodlist[5] = new prodobj('Product 5',0)
prodlist[6] = new prodobj('Product 6',1300.00)
prodlist[7] = new prodobj('Product 7',1600.00)
prodlist[8] = new prodobj('Product 8',2100.00)
prodlist[9] = new prodobj('Product 9',0)
prodlist[10] = new prodobj('Product 10',100.00)
prodlist[11] = new prodobj('Product 11',130.00)
prodlist[12] = new prodobj('Product 12',120.00)
prodlist[13] = new prodobj('Product 13',70.00)
prodlist[14] = new prodobj('Product 14',100.00)
prodlist[15] = new prodobj('Product 15',0)
prodlist[16] = new prodobj('Product 16',2650.00)
prodlist[17] = new prodobj('Product 17',3450.00)
prodlist[18] = new prodobj('Product 18',0)
prodlist[19] = new prodobj('Product 19',2050.00)
prodlist[20] = new prodobj('Product 20',2850.00)
prodlist[21] = new prodobj('Product 21',0)
prodlist[22] = new prodobj('Product 22',850.00)
prodlist[23] = new prodobj('Product 23',140.00)
prodlist[24] = new prodobj('Product 24',400.00)
prodlist[25] = new prodobj('Product 25',100.00)
prodlist[26] = new prodobj('Product 26',0)
prodlist[27] = new prodobj('Product 27',300.00)
prodlist[28] = new prodobj('Product 28',400.00)
prodlist[29] = new prodobj('Product 29',1500.00)
prodlist[30] = new prodobj('Product 30',2000.00)
prodlist[31] = new prodobj('Product 31',0)
prodlist[32] = new prodobj('Product 32',354.00)
prodlist[33] = new prodobj('Product 33',10.00)
prodlist[34] = new prodobj('Product 34',20.00)
//-- The ProductsInList variable defined in the head of this page must match the
//-- highest-numbered item in this array. In this sample page you can see that the
//-- ProductsInList variable is initially set to 10, which matches the last subscript
//-- in the array above.

//-- Creates a new array named ordData, which will stores order form line items.
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData[i] = new ordobj(0,0,0,0)
}
</SCRIPT>
<FORM NAME="ordform" METHOD="POST">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1">
<TR CLASS="inside">
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">PRODUCT</FONT></TH>
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">QTY</FONT></TH>
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">ESTIMATED UNIT<BR>COST</FONT></TH>
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">ESTIMATED<BR>TOTAL</FONT></TH>
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">ACTUAL UNIT<BR>COST</FONT></TH>
<TH><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">ACTUAL<BR>TOTAL</FONT></TH>
</TR>
<SCRIPT LANGUAGE="JavaScript">
for (var rownum=1;rownum<=RowsInForm;rownum++) {
document.write('<TR><TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write('<SELECT NAME="prodchosen'+rownum+'" onChange="updateRow('+rownum+');">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<OPTION>"+prodlist[i].name)
document.write ("</OPTION>")
}
document.write ("\n")
document.write ('</SELECT></FONT></TD>')
document.write ('<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write ('<INPUT NAME="qty'+rownum+'" onChange="updateRow('+rownum+');" VALUE="" SIZE="3">')
document.write ('</FONT></TD>')
document.write ('<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write ('<INPUT NAME="unitprice'+rownum+'" VALUE="" ')
document.write ('SIZE=12 onfocus="this.blur()"></FONT></TD>')
document.write ('<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write ('<INPUT NAME="extprice'+rownum+'" VALUE="" ')
document.write ('SIZE=12 onfocus = "this.blur()"></FONT></TD>')
document.write ('<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write ('<INPUT NAME="actunitprice'+rownum+'" VALUE="" ')
document.write ('SIZE=12 onfocus = "this.blur()"></FONT></TD>')
document.write ('<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">')
document.write ('<INPUT NAME="acttotprice'+rownum+'" VALUE="" ')
document.write ('SIZE=12 onfocus = "this.blur()"></FONT></TD>')
document.write ('</TR>')
}
</SCRIPT>
<TR CLASS="inside">
<TD ALIGN="RIGHT" COLSPAN="3"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>TOTAL</B>&nbsp;&nbsp;</FONT></TD>
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><INPUT NAME="subtotal" onfocus="this.blur()" SIZE="12"></FONT></TD>
<TD ALIGN="LEFT" BGCOLOR="#CCCCCC"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><!---<INPUT NAME="acunittotal" onfocus="this.blur()" SIZE="12">---></FONT></TD>
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><INPUT NAME="actotal" onfocus="this.blur()" SIZE="12"></FONT></TD>
</TR>
</TABLE>
</FORM>


HTH,

-sage-

[wyattwebb]

wow!!

here's somthing really simple, it totals any text field

<script language="javascript">
function totFields()
{
var totArr = totForm.getElementsByTagName("input");
var ii = totArr.length;
var i = 0;
var totVal = 0;

for (i=0;i<ii;i++)
{
if (totArr(i).type == "text" &&
totArr(i).value > "" &&
totArr(i).id != "txtTotal")
{
totVal += parseInt(totArr(i).value);
}
}
totForm.txtTotal.value = totVal;
}
</script>
<form method="POST" action="" id="totForm">
<input type="text" name="T1" onchange="totFields();"><br>
<input type="text" name="T2" onchange="totFields();"><br>
<input type="text" name="T3" onchange="totFields();"><br>
<input type="text" name="T4" onchange="totFields();"><br>
<input type="text" name="T5" onchange="totFields();"><br>
total:<input type="text" name="txtTotal" size="20" ID="txtTotal"><br>
<input type="submit" value="Submit" name="B1" ID="Submit1"><input type="reset" value="Reset" name="B2" ID="Reset1"></p>
</form>

[sage45]

Nice one Wyatt... ;)

Mine is mostly for a running total of like a shopping cart, where the seller already has set products and prices for them, the only thing the seller doesnt know is how many of each one the buyer wants...

-sage-

[HairyTeeth]

It's a bit too simple wyattwebb.

The user can submit an incorrect total by simply changing it. Adding is simple, but making sure the user submits the correct total takes a little more.

[EDIT: anyway, isn't this a multiplication then an addition problem?]

Personally, I'd do all of this server side. If i couldn't, i'd make sure the script had good validation.

What datasource are you using Dave Cotton? A javascript array; a database perhaps?

[Dave Cotton]

Hi
And thanks for suggestions and comments to date.
Am I at liberty to use the scripts you have suggested?

Both worth a try. However, you are right the information I do not know is the quantity the visitor will place in field? Also to compound problem I don’t know what price he will put in either?

Ultimately I will need to place a shopping cart but this is an interim option. (Any suggestions on suitable shopping carts compatable with FrontPage 2K)

I think database

Dave C

[wyattwebb]

Feal free to use my code. I am sure you can use the others too.

You can insert a form in FP2k and save it to database using the standard frontpage components. It's quite limited but if you use the code from sage45 in a form and save the form to a database it might work.

[sage45]

Sure you can use the script I posted... I am sure that with a little tinkering it can be edited to suit your needs...

-sage-

[wyattwebb]

Ok so I combined everything is this what you are looking for?

http://www.wyattwebb.com/shoping_cart.htm

[HairyTeeth]

Originally posted by Dave Cotton
... However, you are right the information I do not know is the quantity the visitor will place in field? Also to compound problem I don’t know what price he will put in either?

You want to allow the visitor to put in their own price? Is it a bidding or auction thing?

[Dave Cotton]

Hi

First of all may I thank you all for allowing me to use the scripts you posted. I will check out the shopping cart.

Regarding the site. My brief was to have the site in two halfs one for public and the other for trade only (password protected) The trade only would have prices of product whereby registered trade customers can place orders on line (hence the eventual use of the shopping cart).

However, I want to learn more about shopping cart ecommerce before plunging haplessly into it...

...The site is very much in a state of constuction, and I have not yet loaded up the form we are currently discussing until I can sort this adding up problem!

The URL is www.pyramid-products.com I have done all the photography work and there will be some 700 product images when finished.
Please feel free to critic the site I wont be offended.

Regards

[HairyTeeth]

Hi Dave,
I reckon the site will come up really good. :thumbsup: You are going to need a good e-commerce solution for managing orders etc. I doubt that Frontpage will be sufficient (but i've never used it so i don't know).

Aside from the shopping cart (which can be done client side), I think you will need a real good backend database that allows the business to do all the things it will need to do including shipping orders, customer info, weekly/monthly business statements etc and little things like producing invoices/receipts or varying levels of customer discount and so on.

All of this should integrate,as far as possible) with the clients current commercial practices.

Does the clients server support ASP or PHP ? Personally, I think you should start thinking about the backend. Shopping carts are a dime a dozen.

[Dave Cotton]

Thank you Hairyteeth for taking the time to look and that’s some great encouragement. Yeh, I think you hit the nail on the head (regarding back end) all this sales information is vital and massing this information in a manner to recognise sales trends and peaks and troughs is important.

I have spoken to the client regarding a stock control set up which, should allow his on the road sales reps to get up to date access to product stocks, lead time and delivery times etc.

He has spoken to sage and they are aware of what we are doing and are also looking at something.

"My server" Netscan UK have all “necessary facilities”. This is a big site for me and I want to plan it out thoroughly.

I’m still keen to keep the user-ability of the site clean and simple though. This of course means more work from me insomuch as I want to have the site do customer friendly tasks, which often requires this fantastic JavaScript programming which, is at present out of my depth.

I will endeavour to sort this order form out then I can hopefully move forward. Do you think I could add some script that will take the user after filling in the form to an acknowledgement page or will this be in conflict with the adding up script I intend to use?

Thank you
:)

[HairyTeeth]

Your doing the homework: good one.

Re: Javascript.
In e-commerce sites, I use javascript as much as possible so i tax the server as little as possible. After all, if the users machine can do it, why ask the server to do it? - it's got enough to do.

But it depends on what im trying to achieve, what resources I have and who i think the users will be. For e-commerce sites, I always use javascript for form validation, but it's backed up by a validation routine server-side (asp, php etc) in case the user is javascript-disabled.

In other words, if the process is mission critical, to one degree or another, and I'n thinking of using a client-side script, it has a server-side backup at the minimum.

You want a shopping cart: what if the user has javascript turned off? The shame!! Has your client lost a sale and how many might that add up to over time? I'd do the shopping cart with server-side.

Re: Redirect.
If you have a mailserver, it should allow you to redirect. If not, it goes something like this:


function validateOrderForm(){

if(blah != true){
alert("Fill in the box!!");
return false;
}

delay();
return true
}

function delay(){
setTimeout("thanks()",1000);
}

function thanks(){
location.href="http://www.thank-you-page.com/";
}


The validate function is called from the forms action attribute like so:


<form action=" http://yourmailserver/cgi-bin/mailthing"
method='post' onsubmit="return validate(this)">


The full script worked when the form action was set to my mailserver: i redirected myself to coding forums and picked up the mail, so it works. Theres probably no need for the delay() function but I like to give things a little time to make sure everythings done.

Have a muck around with the scripts that you have first, then worry about validation and redirection. ;)

Cheers for now.