Solved

Javascript Order Calculator

Posted on 1998-03-02
3
382 Views
Last Modified: 2008-03-17
I'm looking for a JavaScript order form calculator that will automatically put in the price of an item if only the item is chosen from a drop down box.  Then the only other variable would be the qty. This would create the total for that line item in an order.  Each line could be another item
selected from another drop down box.  All items would then go to a sub-total, tax, shipping and grand total. I saw one once like this where the item designated the price instead of a fixed price per line - just can't remember where.

Thanks in advance.
--
Herb Bogart
hbogie@flash.net
0
Comment
Question by:bogie
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
kollegov earned 250 total points
Comment Utility
Sorry, I do not know exact rules how you want to calculate
shippment and taxes, (sorry I live in other country :)
but below is example how this can be done
look into comments inside:


<HTML><HEAD>
<script>
// change number of lines(selects) and tax percent here!
//-------------
var nlines=3;      
var taxpercent=5;
//-------------
function calc()
{var summ=0;
 nitems=0;
 for(i=0;i<nlines;i++)
  {var inx=eval("document.myform.myselect"+i+".selectedIndex");
   var price=eval("document.myform.myselect"+i+".options[inx].value");
   var qty=eval("qty=document.myform.q"+i+".value");
   eval("price="+price);
   ltotal=price*qty;
   summ+=ltotal;
   eval("document.myform.t"+i+".value=ltotal");
   if((eval("document.myform.myselect"+i+".options[inx].selected")==true)&&(inx!=0))
      {nitems+=qty*1.0;}
  }

 f=document.myform;
 f.total.value=summ;

// implement your counting rules here!
//summ refers to Summ of items*qtys


 // rounded tax
 tax=Math.floor(taxpercent*summ)/100;
 f.tax.value=tax;

 //calculate shipping  $3.00 per item for example
 shipping=nitems*3.00;
 f.shipping.value=shipping;
 
 // finnaly we have
 f.ftotal.value=summ-tax+shipping;

}

</script>

</HEAD>
<body>
<FORM  NAME="myform"  onSubmit="calc(); return false;">

<!--If you need to add more lines, just copy-->
<!--and paste from here ---------------------->
<SELECT name="myselect0" onChange="calc();">
  <option value="0.0"  >Please, select
  <option value="0.99" >item1
  <option value="1.25" >item2
  <option value="11.50">item3
  <option value="10.00">item4
</SELECT>
 Qty:<INPUT TYPE="TEXT" NAME="q0" value="0" size=5 onChange="calc();">
   $:<INPUT TYPE="TEXT" NAME="t0" value="0" size=5><br>
<br>

<!---------to here--------->
<!---and Do not forget to change names:-->
<!--  myselect0                        -->
<!--  q0                               -->
<!--  t0                               -->
<!-- to new actual numbers of line     -->

<!-- next  row of select in html       -->
<SELECT name="myselect1" onChange="calc();">
  <option value="0.0"  >Please, select
  <option value="0.99" >item1
  <option value="1.25" >item2
  <option value="11.50">item3
  <option value="10.00">item4
</SELECT>
 Qty:<INPUT TYPE="TEXT" NAME="q1" value="0" size=5 onChange="calc();">
   $:<INPUT TYPE="TEXT" NAME="t1" value="0" size=5><br>
<br>

<!-- next  row of select in html       -->
<SELECT name="myselect2" onChange="calc();">
  <option value="0.0"  >Please, select
  <option value="0.99" >item1
  <option value="1.25" >item2
  <option value="11.50">item3
  <option value="10.00">item4
</SELECT>
 Qty:<INPUT TYPE="TEXT" NAME="q2" value="0" size=5 onChange="calc();">
   $:<INPUT TYPE="TEXT" NAME="t2" value="0" size=5><br>
<br>


<hr>
total:<br><INPUT TYPE="TEXT" name="total" onChange="calc();"><br>
Tax:(5%)<br><input type="TEXT" name="tax"   onChange="calc();"><br>
Shipping($3.00 per item)<br><input type="TEXT" name="shipping"   onChange="calc();"><br>
FinalTotal:<br><input type="TEXT" name="ftotal"   onChange="calc();"><br>
<Input type="button" value="Calculate" onClick="calc();"><br>
</FORM>
</body>
</HTML>


Please, let me know if you need changes in calculations
algorythms, I'll do it for you.
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
This solution have a difference from previous one
it a little bit easier to change number of lines in form,
And you need to make changes (add/remove items)
in only one place.

<html>
<head>
<script>
// number of lines you want to have;
var nl=3;

function initArray()
{this.length = 0;}

prices  =new initArray();
products=new initArray();

function addElement(pname,pprice)
{oldlength=products.length;
 prices.length++;
 products.length++;
 products[oldlength]=pname;
 prices[oldlength]=pprice;
}

//-----------------------
// add/remove items here!
//-----------------------
addElement("--------select from list----------","0");
addElement("itemname1",1.99);
addElement("itemname2",2.99);
addElement("itemname3",3.00);
addElement("itemname4",4.00);

//-----------------------------------------------------
// you can change change taxes and shipment rules here
// ----------------------------------------------------
function taxesandshipment(totalsumm,itemsnumber)
{return totalsumm*1.05+itemsnumber*0.30;
}


function calc()
{var summ=0;
 var totalqty=0;
 for(i=0;i<nl;i++)
  {var qty;
   eval('qty=document.forms[0].q'+i+'.value');
   for(j=0;j<qty.length;j++)
     {if((qty.charAt(j)<"0") || (qty.charAt(j)>"9"))
            {qty="0";
             eval('document.forms[0].q'+i+'.value="0"');
             alert("Invalid Qty in Line:"+i);
             break;            
            }
     }
   var inx;
   eval('inx=document.forms[0].line'+i+'.selectedIndex');
   var p=prices[inx];
   var t=qty*p;
   if(p!=0) totalqty+=qty;
   eval('document.forms[0].t'+i+'.value=t');
   summ+=t;  
  }
 
 document.forms[0].total.value=Math.floor(summ*100)/100;
 tfinal=taxesandshipment(summ,totalqty);
 document.forms[0].tfinal.value=Math.floor(tfinal*100)/100;
}


function setform()
{var s ='<FORM onSubmit="return false">';
 document.writeln(s);
 for(i=0;i<nl;i++)
  {s='<SELECT name="line'+i+'" onChange="calc()">';
   document.writeln(s);
      for(j=0;j<products.length;j++)
         {s ='<option value="'+prices[j]+'">'+products[j];
          document.writeln(s);
         }
   s ='</select>';
   s +=' Qty:<INPUT name="q'+i+'" TYPE="TEXT" onChange="calc()" size=12 value="0">'
   s +=' $:<INPUT name="t'+i+'" TYPE="TEXT" onChange="calc()" size=12 value="0"><br>'
   document.writeln(s);
  }
 s='<input type="submit" onClick="calc(); return false;" value="Calculate">';
 document.writeln(s);
 s ='<br>total:<br><input type="text" name="total" size=12 value="" onChange="calc()">'
 s+='<br>including 5% tax and $0.30 shipping and handling per item:<br><input type="text" name="tfinal" size=12 value="" onChange="calc()">'
 s+='</form>';
 document.writeln(s);
 for(i=0;i<nl;i++) eval('document.forms[0].line'+i+'.options[0].selected=true');
}
</script>



</head>
<body>
 <script>
   setform();
 </script>
</body>
</html>
0
 

Author Comment

by:bogie
Comment Utility
Adjusted points to 250
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now