Solved

Formulas in HTML

Posted on 2004-10-21
148 Views
Last Modified: 2010-04-09
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.  
0
Question by:BirdShooter
    2 Comments
     
    LVL 48

    Accepted Solution

    by:
    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
     
    LVL 48

    Expert Comment

    by:Ryan Chong
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Introduction One of the frequent application design questions goes something like this: "How can I confirm when a client registers on my web site?" The registration might be for general use of a self-administered site like a forum, or for attend…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    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…

    934 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

    18 Experts available now in Live!

    Get 1:1 Help Now