Need help with javascript order form!

JavaScript
1

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.

2

Hi there,

Welcome to the forums :slight_smile:

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:

<!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:

<!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" />
...
  1. 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:

<!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.