Formulas in HTML

How do I create a formula in HTML to reside on my website?  For example, I want the user to select a quantity from a drop-down box.  Once selected, I want that number to be multiplied by a cost per unit amount, invisible to the user.  The total amount should appear on the site.

Ex.  I want to order 5 hats, so I choose '5' from a drop-down box.  Each hat is $10.  Therefore, Total Cost = $50.00.  
BirdShooterAsked:
Who is Participating?
 
Ryan ChongConnect With a Mentor Commented:
something like below will help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">
      function updatecost(v) {
            var wDoc1 = window.document;            
            var eDiv1 = document.all ? wDoc1.all["TotalCost"] : wDoc1.getElementById("TotalCost");
            eDiv1.innerHTML =  parseInt(v) * 10;
      }
      
</script>
<body>
<form name="form1" method="post" action="">
  Total Item
  <select name="totalitem" onChange="updatecost(this.value)">
    <option value="0"> </option>
      <option value="1">1</option>
    <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
  </select>
</form>
<p>
Total Cost ($):<div id="TotalCost"> 0</div>
&nbsp;</p></body>
</html>
0
 
Ryan ChongCommented:
here is a better layout version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">
      function updatecost(v) {
            var wDoc1 = window.document;            
            var eDiv1 = document.all ? wDoc1.all["TotalCost"] : wDoc1.getElementById("TotalCost");
            eDiv1.innerHTML =  "Total Cost ($): " + parseInt(v) * 10;
      }
      
</script>
<body>
<form name="form1" method="post" action="">
  Total Item
  <select name="totalitem" onChange="updatecost(this.value)">
    <option value="0"> </option>
      <option value="1">1</option>
    <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
  </select>
</form>
<p>
<div id="TotalCost">Total Cost ($): 0</div>
&nbsp;</p></body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.