Updating Cost Automatically

JavaScript
1

Hi guys,

I’m trying to create a simple quote calculator to show the user how much tickets will cost if they choose X quantity of tickets. I’d like the quote to update in the #total_figure div each time they change the quantity from the option selections.

For example, if they choose 2 tickets at $50 and 1 ticket @ $20, the #total_figure should be $120

Many thanks for any help!!



<form id="book" method="post">

<label>

	<span class="bold_yellow">Ticket 1 @ $20</span>

		<select id="adults">

			<option value="0">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>
			<option value="6">6</option>
			<option value="7">7</option>

		</select>

</label>	


<label>

	<span class="bold_yellow">Ticket 2 @ $50</span>

		<select id="children">

			<option value="0">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>
			<option value="6">6</option>
			<option value="7">7</option>

		</select>

</label>



<label>

	<span class="bold_yellow">Ticket 3 @ $100</span>

		<select id="family">

			<option value="0">0</option>
			<option value="1">1</option>

		</select>

</label>		



	<div class="total">

		<div class="total_title">

			<p class="bold_yellow">TOTAL:</p>

		</div>							


		<div class="total_figure">

			<p id="total_figure" class="bold_yellow">$0.00</p>

		</div>

	</div>


<input type="submit" value="submit"/>

</form>
2

Here is a script that uses the names of the form elements to carry out the calculation. It uses the onchange event to recalculate the total. I put the total in a textbox so that it would be transferred on submitting your form. Keep in mind that the onchange event will only happen if you make a change. Selecting the same number twice will not fire the event. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>calculator</title>
<script type="text/javascript">
 function calc(formObj)
  { var allTots= parseInt(formObj["adults"].value)*20+
                 parseInt(formObj["children"].value)*50+
                 parseInt(formObj["family"].value)*100;
    formObj["total_figure"].value=allTots;
  }
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { margin:50px; }
.bold_red  { color:#F00;  }
.bold_blue  { color:#00F; text-align:center;  }
.m10 { margin-top:10px; }

</style>
</head>

<body>

<div id="wrap">
  <form name="book" method="post">
    <span class="bold_red" accept-charset="ISO-8859-1">Ticket 1 @ $20</span>&nbsp;
    <select name="adults" onchange="calc(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select><span class="bold_red">&nbsp; Ticket 2 @ $50</span>&nbsp;
    <select name="children" onchange="calc(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select><span class="bold_red">Ticket 3 @ $100</span>&nbsp;
    <select name="family" onchange="calc(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    </select>
    <div class="total">
      <div class="total_title">
        <p class="bold_red">TOTAL:</p>
      </div>
      <div class="total_figure">
        <input class="bold_blue" type="text" name="total_figure" value="0" size="10">
      </div>
    </div>
    <input class="m10" type="submit" value="submit">
  </form>
</div>
<!-- end wrap -->

</body>

</html>