Adding totals in javascript

Question

maxxxx 0 Newbie Poster

12 Years Ago

Hello all. I'm trying to figure out the javascript so that when I hit the total up order button, it will fill in the subtotal, PST, GST and give me my total in the box above the total up order button. Can some help me out?

Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script type="text/javascript">


function formValidator(){

    var firstName = document.getElementById('firstname').value;
    if (firstName == "") {
        document.getElementById('firstAl').innerHTML = "first name not entered";

    }
    else {
        document.getElementById('firstAl').innerHTML = "";

    }
	
   var lastName = document.getElementById('lastname').value;
   if (lastName == ""){
     document.getElementById('secondAl').innerHTML = "last name not entered";
    }
	 else {
        document.getElementById('secondAl').innerHTML = "";

    }
	
   var streetNumber = document.getElementById('streetnumber').value;
   if (streetNumber == ""){
     document.getElementById('thirdAl').innerHTML = "street number not entered";
    }
	 else {
        document.getElementById('thirdAl').innerHTML = "";

    }
	
   var streetName = document.getElementById('streetname').value;
   if (streetName == ""){
     document.getElementById('forthAl').innerHTML = "street name not entered";
    }
	 else {
        document.getElementById('forthAl').innerHTML = "";

    }
	
	var city = document.getElementById('city').value;
   if (city == ""){
     document.getElementById('fifthAl').innerHTML = "city name not entered";
    }
	 else {
        document.getElementById('fifthAl').innerHTML = "";

    }
	
   var postalCode = document.getElementById('postalcode').value;
   if (postalCode == ""){
      document.getElementById('sixthAl').innerHTML = "postel code not entered";
    }
	 else {
        document.getElementById('sixthAl').innerHTML = "";

    }
	
   var phoneNumbera = document.getElementById('phonenumbera').value;
   if (phoneNumbera == ""){
     document.getElementById('seventhAl').innerHTML = "phone number not entered";
    }
	 else {
        document.getElementById('seventhAl').innerHTML = "";

    }
	
   var phoneNumberb = document.getElementById('phonenumberb').value;
   if (phoneNumberb == ""){
    document.getElementById('seventhAl').innerHTML = "phone number not entered";
    }
	 else {
        document.getElementById('seventhAl').innerHTML = "";

    }
	
   var email = document.getElementById('email').value;
   if (email == ""){
     document.getElementById('eighthAl').innerHTML = "email not entered";
    }
	 else {
        document.getElementById('eighthAl').innerHTML = "";

    }
	
   var submit = document.getElementById('submit').value;
    }

  function comments()
 {
 (document.getElementById("comments").value);
 }

 function addTotal() {
     document.getElementById("hamSub").value = 2.99 * document.getElementById("hamQuant").value;
     document.getElementById("cheeseSub").value = 3.99 * document.getElementById("cheeseQuant").value;         
     document.getElementById("chickenSub").value = 4.99 * document.getElementById("chickenQuant").value;         
     document.getElementById("FriesSub").value = 4.99 * document.getElementById("FriesQuant").value;
	 document.getElementById("gravySub").value = 0.50 * document.getElementById("gravyQuant").value; 
	 document.getElementById("chilliSub").value = 1.99 * document.getElementById("chilliQuant").value; 

 }

  function howtoget(){

var pickup = document.getElementById("pickup").checked==true
   
   if (pickup == "")
     alert("Your food will be delivered in 20 minutes");

}	
	
 function sendOrder() {
     alert('You have not ordered anything yet');
     formValidator();
	document.getElementById('send').reset(); 

       

}
 
 
 
 

</script>

</head>

<body>
<form>

<center>
  <B>The JavaScript Eatery
</center>
<form>
  <table align="center" border="1">
    <tbody>
      <tr>
        <td><center>
            <b>vital information</b>
          </center>
          <table>
            <tbody>
              <tr>
<td width="121">first name</td>
<td width="289"><input type="text" size="15" maxlength="50" id="firstname"><br /><div id="firstAl"></div></td>
</tr>
<tr>
<td>last name</td>
<td><input type="text" size="15" maxlength="50" id="lastname"><br /><div id="secondAl"></div></td>
</tr>
<tr>
<td>street number</td>
<td><input type="text" size="40" maxlength="35" id="streetnumber"><br /><div id="thirdAl"></div></td>
</tr>
<tr>
<td>street name</td>
<td><input type="text" size="40" maxlength="35" id="streetname"><br /><div id="forthAl"></div></td>
</tr>
<tr>
<td>city</td>
<td><input type="text" size="25" maxlength="21" id="city"><br /><div id="fifthAl"></div></td>
</tr>
<tr>
<td>postal code</td>
<td><input type="text" size="25" maxlength="21" id="postalcode"><br /><div id="sixthAl"></div></td>
</tr>
<tr>
<td>phone number</td>
<td><input id="phonenumbera"  size="4" />
                 -
<input id="phonenumberb"  size="5" /><br /><div id="seventhAl"></div></td>
</tr>
<tr>
<td>email address</td>
<td><input type="text" size="15" id="email"><br /><div id="eighthAl"></div></td>
</tr>
            </tbody>
          </table></td>
        <td width="266" valign="top"><p>&nbsp;</p>
<p>&nbsp;</p>
<p><b>comments / special request</b><br />
<textarea rows="10" cols="35"id="comments" ></textarea>
        </td>
      </tr>
    </tbody>
  </table>
  <hr />
  <table width="90%">
    <tbody>
      <tr>
        <td><table>
            <tbody>
              <tr>
                <th>item</th>
                <th>price</th>
                <th>quantity</th>
                <th>sub-total</th>
              </tr>
              <tr align="middle">
                <td align="left">Hamberger</td>
                <td><input id="hamburger" size="7" value="$2.99" /></td>
                <td><input id="hamQuant" size="3" /></td>
                <td><input id="hamSub" size="6" /></td>
              </tr>
              <tr align="middle">
                <td align="left">Cheeseburger</td>
                <td><input id="cheeseburger" size="7" value="$3.99" /></td>
                <td><input id="cheeseQuant" size="3" /></td>
                <td><input id="cheeseSub" size="6" /></td>
              </tr>
              <tr align="middle">
                <td align="left">Chicken Burger</td>
                <td><input id="chicken Burger" size="7" value="$4.99" /></td>
                <td><input id="chickenQuant" size="3" /></td>
                <td><input id="chickenSub" size="6" /></td>
              </tr>
            </tbody>
          </table></td>
        <td align="right"><table>
            <tbody>
              <tr>
                <th>item</th>
                <th>price</th>
                <th>quantity</th>
                <th>sub-total</th>
              </tr>
              <tr align="middle">
                <td align="left">French Fries</td>
              <td><input id="French Fries" size="7" value="$4.99" /></td>
                <td><input id="FriesQuant" size="3" /></td>
                <td><input id="FriesSub" size="6" /></td>
              </tr>
              <tr align="middle">
                <td align="left"><input type="checkbox" />
                 gravy</td> 
                <td><input id="gravy" size="7" value="$0.50" /></td>
                <td><input id="gravyQuant" size="3" /></td>
                <td><input id="gravySub"  size="6" /></td>
              </tr>
              <tr align="middle">
                <td align="left"><input type="checkbox" />
                  chilli</td>
                <td><input id="chilli" size="7" value="$1.99" /></td>
                <td><input id="chilliQuant" size="3" /></td>
                <td><input id="chilliSub" size="6" /></td>
              </tr>
            </tbody>
          </table></td>
      </tr>
      <tr>
        <td colspan="2"><table align="center">
            <tbody>
              <tr>
                <td>subtotal</td>
                <td><input id="subTotal" size="6" /></td>
              </tr>
              <tr>
                <td>pst 7%</td>
                <td><input id="PST" size="6" /></td>
              </tr>
              <tr>
                <td>gst 5%</td>
                <td><input id="GST" size="6" /></td>
              </tr>
              <tr>
                <td>total</td>
                <td><input id="TOTAL" size="6" /></td>
              </tr>
              <tr>
                <td colspan="2"><input type="button" value="total up order" onclick="addTotal()" />
                </td>
              </tr>
            </tbody>
          </table></td>
      </tr>
    </tbody>
  </table>
  <hr />
  <table width="80%" align="center">
    <tbody>
      <tr>
        <td><table>
            <tbody>
              <tr align="middle">
                <td>Payment</td>
                <td>card number</td>
                <td>expiration mm/yy</td>
              </tr>
              <tr align="middle">
                <td><select>
                    <option selected="selected">cash</option>
                    <option>master card</option>
                    <option>visa</option>
                  </select>
                </td>
                <td><input />
                </td>
                <td><select>
                    <option selected="selected">01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                  </select>
                  <select>
                    <option selected="selected">03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table></td>
        <td align="middle"><table>
            <tbody>
              <tr>
                <td><input type="radio" NAME="radio" value="Your food will be ready for pickup in 10 minutes" id="pickup" onClick="alert(value)"></td>
                <td>pickup</td>
              </tr>
              <tr>
                <td><input type="radio" NAME="radio" value="Your food will be ready for delivery in 20 minutes" id="delivery" onClick="alert(value)"></td>
                <td>delivery</td>
              </tr>
              <tr>
                <td><input type="radio" NAME="radio" value="Your table will be ready in 5 minutes" id="eatin" onClick="alert(value)"></td>
                <td>eat in</td>
              </tr>
            </tbody>
          </table></td>
      </tr>
    </tbody>
  </table>
  <center>
  
            
      <input type="reset" id="cancel"  name="clear" value="clear order"/>

   <input type="button" id="send" value="send order" onclick="sendOrder()" />

  </center>
</form>

<p>&nbsp;</p>
<p><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content></p>
<p>&nbsp;</p>



</form>
</body>
</html>

javascript

2 Contributors
1 Reply
145 Views
6 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by qazplm114477

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

qazplm114477 14 Junior Poster · Answer 1 · 2011-12-16T00:49:47+00:00

Which part of the code are you having problems in? Don't just post your entire code at first, just snippets of parts that have errors or parts you can't figure out.

If you just want to put text in an element after you calculate the sub total just use .innerHTML