Solved

Javascript Order Calculator

Posted on 1998-03-02
3
390 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
ID: 1278547
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
ID: 1278548
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
ID: 1278549
Adjusted points to 250
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Position not returning 2 48
Don't understand jquery promises 6 37
Javascript and Jquery not firing 9 42
Javascript to allow login/password authorization 4 31
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

867 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

16 Experts available now in Live!

Get 1:1 Help Now