Updating Cost Automatically

Discussion in 'JavaScript' started by martin12532, Mar 1, 2014.

0
  1. #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>
    Code (markup):

     
    martin12532, Mar 1, 2014 IP
  2. HassanKhalid

    HassanKhalid Active Member

    Messages:
    158
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    90
    #2 
    <!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Cal(obj){
var args=Cal.arguments,frm=args[0].form,nu,tot=0;
var values=[];
for (var ip,z0=1;z0<args.length-1;z0++){
  ip=frm[args[z0]];
  ip.value=ip.value.replace(/\D/g,'');
  values.push([ip.value,ip.parentNode.className]);
}
if (values[0][0].length>0){
  nu=values[0][0];
  tot=nu*values[0][1];
  for (var z1=1;z1<values.length;z1++){
   if (values[z1][0]){
    tot+=values[z1][0]*values[z1][1]*nu
   }
  }
}
frm[args[args.length-1]].value='$'+tot;
}
/*]]>*/
</script></head>

<body>
<form>
"label" -Number of Shirts<span class="10" ><input name="number" size="5"/></span><br />
"label" -Number of Colors on Front<span class="10" ><input name="front" size="5" /></span><br />
"label" -Number of Colors on Back<span class="12" ><input name="back" size="5" /><br />
<input type="button" name="" value="Calculate" onmouseup="Cal(this,'number','front','back','total');" />
<input name="total" />
</form>
</body>

</html>
    Code (markup):
     
    HassanKhalid, Mar 1, 2014 IP