SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    NEED HELP WITH JAVASCRIPT ORDER FORM!

    Hello, I'm new to this forum and new to JS as well. I am trying to make a purchase order form for a zoo I'm creating. Basically I need it to add the total of the items I select and then send the order. However, I get various errors which I will post in screenshots. The first is when I ran the JS through a JS lint, then the second one is showing an error on line 111 of my code. Also, each one of the drop down values comes up as "undefined" an it doesn't calculate the total. Again, I'm very new to JavaScript so I'm not really sure how to go about fixing this problem so I can get this working. Any advice or help would be great! I'll post the screenshots as well. I actually couldn't get the screen shots to attach but the code did.
    Attached Files Attached Files

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    So, there is quite a bit going on on your page.
    Before I address your question, I would like to make two points:

    1. You shouldn't have HTML within the <head> section of your website.

    You had this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <br/ >
    <div align="center">
    <img src="navBar.jpg" width="1257" height="96" alt="Navigation Bar" />
    ...
    <link rel="stylesheet" type="text/css" href="sheet.css" />
    <meta content="text/html; charset=UTF-8">
    </head>
    That needs to be:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="sheet.css" />
      </head>
      <body>
        <br/ >
        <div align="center">
        <img src="navBar.jpg" width="1257" height="96" alt="Navigation Bar" />
    ...
    2. Your JavaScript needs to go just before the closing </body> tag, otherwise you are attempting to reference elements on the page before they have been created.

    So, that said, I've made you a small demo with four dropdown menus (like your original page).

    When any of the dropdown menus change, the total is updated accordingly.

    Here's a demo.

    Here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?1039587-NEED-HELP-WITH-JAVASCRIPT-ORDER-FORM!-->
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Custom Calculator</title>
        <style>
          #myForm div{
            margin-bottom:15px;
          }
        </style>
      </head>
     
      <body>
        <form action="" method="POST" name="myForm" id="myForm">
          <h1>Place your order</h1>
          <div>
            <label for="tiger">Tiger Plush $3</label>
            <select id="tiger">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          
          <div>
            <label for="monkey">Monkey Plush $3.50</label>
            <select id="monkey">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div>
            <label for="elephant">Elephant Shirt $12</label>
            <select id="elephant">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          
          <div>
            <label for="penguin">Penguin Shirt $12</label>
            <select id="penguin">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
    
          <h3>Cost</h3>
          <div>
            $<input type="text" id="cost" value="0" readonly size="3"/>
          </div>
          
          <div>
            <input type="submit" />
          </div>
        </form>
     
        <script type="text/javascript">
          function updateTotal(){
            var tot = 0;
            tot += f.tiger.value * 3 +
                   f.monkey.value * 3.5 +
                   f.elephant.value * 12 +
                   f.penguin.value * 12;
            document.getElementById("cost").value = tot.toFixed(2);
          }
          
          var f = document.forms['myForm'];
          var sel = document.getElementsByTagName("select");
    
          for(var i=0; i<sel.length; i++) {
            sel[i].onchange = function(){updateTotal()};
          }
          
          f.onsubmit = function(){
            alert("Your total cost will be: \$" + f.cost.value);
            return false;
          }
        </script>
      </body>
    </html>
    Hopefully you can use this as a template and build your page up from there.

    If you have any further questions, just let me know.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •