www.webdeveloper.com
Results 1 to 8 of 8

Thread: calculating price in javascript

  1. #1
    Join Date
    Mar 2012
    Posts
    21

    calculating price in javascript

    Hi all!

    I am trying to create a online booking page for my fathers business and need some assistance.
    I am relatively new to JavaScript, and wanted to keep it simple - so I've tried to replicate what I will do with a different system (the one I'm trying out is ticket booking).

    I have a system where you pick the ticket and how many you want, but I wanted to show the total price underneath, after the customer has chosen which ticket and how many.

    Would anyone be able to help?

    Code:
    <html>
    
    <center>
    <br>
    <br>
    <br>
    <h1><FONT COLOR="000000">Guns N' Roses</FONT></h1>
    
    <head>
    <script type="text/javascript">
    
    
    //validate the form (name shouldn't be blank)
    
    
    function validate()
    {
    var x=document.forms["form1"]["Name"].value;										//validate the name field
    if (x==null || x=="")
      {
      alert("Please fill in your Name.");												//show message if empty
      return false;
      }
    
    
    var x=document.forms["form1"]["Email"].value;										//validate the email
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)								//check for the "@" and "."
      {
      alert("Not a valid e-mail address.");
      return false;
      }
    
    
    var x=document.forms["form1"]["Card"].value;										//validate the card field
    if (x==null || x=="")
      {
      alert("Please fill in your Card number.");										//show message if empty
      return false;
      }
    
    }
    </script>
    
    
    </head>
    
    
    <body>
    
    <!--offer choices-->
    
    <br>
    <br>
    <h4>Select Your Chosen Ticket: </h4>
    <select>
    
    <option>Select Ticket</option>
    
    <option>London, 10th July - 88</option>
    
    </select>
    
    <!--number of tickets-->
    <br>
    <br>
    <br>
    <br>
    <h4>Select The Number of Tickets:</h4>
    (maximum of 6)
    
    <br>
    <br>
    <select>
    
    <option>Select Ticket</option>
    
    <option>1 </option>
    <option>2 </option>
    <option>3 </option>
    <option>4 </option>
    <option>5 </option>
    <option>6 </option>
    
    </select>
    
    
    <!--form to enter details-->
    
    
    <form name = "form1">
    <br><br><br><br><br>
    
    
    <h2>Please Enter Your Details Below.</h2>
    
    
    <b>Name:</b> <br /><input type="text" name="Name" value="" size="30" maxlength="50" /> <br><br>
    	
    <b>Address:</b><br>
    <input type="text" name="Address1" value="Line 1" size="30" maxlength="50" />
    <br><input type="text" name="Address2" value="Line 2" size="30" maxlength="50" />
    <br><input type="text" name="Address3" value="Town/City" size="30" maxlength="50" />
    <br><input type="text" name="Address4" value="Postcode" size="30" maxlength="50" />
    
    <br><br><b>Telephone:</b> <br /><input type="text" name="Phone" value="" size="30" maxlength="11" /> <br><br>
       
    <b>Email:</b><br><input type="text" name="Email" value="" size="30" maxlength="50" /><br><br>
    
    
    <b>Card Number:</b><br><input type="text" name="Card" value="" size="30" maxlength="16" />
    
    </form>
    
    <br><br>
    
    <input type="submit" value="Buy Tickets" onclick="validate();" />													<!--submit button-->
    
    </center>
    
    </body>
    
    
    
    </html>

    As I said, I am relatively new to this so any help would be greatly appreciated and if you could comment why a certain method was chosen it'd be even more helpful in me understanding!


    Thanks in advance.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    First of all, the SELECT needs to be contained within the form tags.

    Second, the SELECT needs an ID so you can get the value and multiply it by the ticket price. I'd also suggest using a hidden field to contain the price (in your example, GB 88, but the value should be just "88") and use that in the math.

    Then, give the SELECT an event handler of onChange, and use that to call the math function.
    Code:
    <select name="numTix" id="numTix" onChange="calcTix();">
    <option value=0>Select Ticket</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>
    
    </select>
    <input type="hidden" name="tixPrice" id="tixPrice" value=88 />
    <input type="text" name="tixTotal" id="tixTotal" value="" />
    Code:
    function calcTix() {
      var form1 = document.forms["form1"];
      var numTix = parseInt(form1.numTix.options[form1.numTix.selectedIndex].value);
      var tixPrice = parseInt(form1.tixPrice.value);
      var tixTotal = form1.tixTotal;
    
      tixTotal.value = numTix * tixPrice;
      }
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Nov 2010
    Posts
    1,031
    or just pass the select as an argument to the function, that way you can get its value and the form that holds it (and the form elements) without all the other messing around.

    There's no need for parseInt() as strings containing only numbers are automatically converted to numbers when multiplied:
    Code:
    <head>
    <script type="text/javascript">
    function calcTix(sel) {
      sel.form.tixTotal.value = sel.value * sel.form.tixPrice.value;
      }
    
    </script>
    
    </head>
    <body>
    <form>
    <select name="numTix" id="numTix" onChange="calcTix(this);">
    <option value=0>Select Ticket</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>
    </select>
    <input type="hidden" name="tixPrice" id="tixPrice" value=88 />
    <input type="text" name="tixTotal" id="tixTotal" value="" />
    <form>
    </body>

  4. #4
    Join Date
    Mar 2012
    Posts
    21
    Thank you, WolfShade!

    I think I understand haha.

    Code:
    function calcTix() {
      var form1 = document.forms["form1"];
      var numTix = parseInt(form1.numTix.options[form1.numTix.selectedIndex].value);
      var tixPrice = parseInt(form1.tixPrice.value);
      var tixTotal = form1.tixTotal;
    
      tixTotal.value = numTix * tixPrice;
      }
    Would this part go in the body section of the code or in the head along with the other piece?

    Also, I was wondering how would I go about if there were other tickets available?
    Say for example if there was another one : "Glasgow, 11th July - 45 " as well as London.

    I tend to have a better understanding when I see an example. If it is possible, would you please show me?


    Thanks once again!

  5. #5
    Join Date
    Mar 2012
    Posts
    21
    xelawho, sorry I didn't notice your comment!

    The code you explained seemed to work fine, so thank you!
    But the problem that still persists me is what if there are other dates how would I write it?

    I mean for something like this:
    Code:
    <html>
    
    <center>
    <br>
    <br>
    <br>
    <h1><FONT COLOR="9F1D35">Madonna</FONT></h1>
    
    <head>
    <script type="text/javascript">
    
    
    //validate the form (name shouldn't be blank)
    
    
    function validate()
    {
    var x=document.forms["form1"]["Name"].value;										//validate the name field
    if (x==null || x=="")
      {
      alert("Please fill in your Name.");												//show message if empty
      return false;
      }
    
    
    var x=document.forms["form1"]["Email"].value;										//validate the email
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)								//check for the "@" and "."
      {
      alert("Not a valid e-mail address.");
      return false;
      }
    
    
    var x=document.forms["form1"]["Card"].value;										//validate the card field
    if (x==null || x=="")
      {
      alert("Please fill in your Card number.");										//show message if empty
      return false;
      }
    
    }
    </script>
    
    
    </head>
    
    
    <body>
    
    <!--offer choices-->
    
    <br>
    <br>
    <h4>Select Your Chosen Ticket: </h4>
    <select>
    
    <option>Select Ticket</option>
    
    <option>London, 17th July - 30</option>
    <option>London, 17th July - 45</option>
    <option>London, 17th July - 70</option>
    <option>London, 18th July - 30</option>
    <option>London, 18th July - 45</option>
    <option>London, 18th July - 70</option>
    <option> </option>
    
    <option>Manchester, 21st July - 25</option>
    <option>Manchester, 21st July - 35</option>
    <option>Manchester, 21st July - 45</option>
    <option>Manchester, 21st July - 70</option>
    
    
    </select>
    
    <!--number of tickets-->
    <br>
    <br>
    <br>
    <br>
    <h4>Select The Number of Tickets:</h4>
    (maximum of 6)
    
    <br>
    <br>
    <select>
    
    <option>Select Ticket</option>
    
    <option>1 </option>
    <option>2 </option>
    <option>3 </option>
    <option>4 </option>
    <option>5 </option>
    <option>6 </option>
    
    </select>
    
    <!--form to enter details-->
    
    
    <form name = "form1">
    
    <br><br><br><br><br>
    
    
    <h2>Please Enter Your Details Below.</h2>
    
    
    <b>Name:</b> <br /><input type="text" name="Name" value="" size="30" maxlength="50" /> <br><br>
    	
    <b>Address:</b><br>
    <input type="text" name="Address1" value="Line 1" size="30" maxlength="50" />
    <br><input type="text" name="Address2" value="Line 2" size="30" maxlength="50" />
    <br><input type="text" name="Address3" value="Town/City" size="30" maxlength="50" />
    <br><input type="text" name="Address4" value="Postcode" size="30" maxlength="50" />
    
    <br><br><b>Telephone:</b> <br /><input type="text" name="Phone" value="" size="30" maxlength="11" /> <br><br>
       
    <b>Email:</b><br><input type="text" name="Email" value="" size="30" maxlength="16" /><br><br>
    
    
    <b>Card Number:</b><br><input type="text" name="Card" value="" size="30" maxlength="50" />
    
    </form>
    
    <br><br>
    
    <input type="submit" value="Buy Tickets" onclick="validate();" />													<!--submit button-->
    
    </center>
    
    </body>
    
    
    </html>

    I understand what you did in the previous code, but what would I do in this case because I have all the dates under one drop down menu?


    Any help is appreciated! Many thanks.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,031
    it's the same sort of process. Much depends on the interface. To me it seems logical to have a button that calls the function to calculate the total, that way they can choose their dates first or the number of tickets and it doesn't make a difference.

    You can put in a little validation (like I did) which relies on the default option having an empty value. See what you think, anyway...

    Code:
    <html>
    
    <center>
    <br>
    <br>
    <br>
    <h1><FONT COLOR="9F1D35">Madonna</FONT></h1>
    
    <head>
    <script type="text/javascript">
    
    
    //validate the form (name shouldn't be blank)
    
    
    function validate()
    {
    var x=document.forms["form1"]["Name"].value;										//validate the name field
    if (x==null || x=="")
      {
      alert("Please fill in your Name.");												//show message if empty
      return false;
      }
    
    
    var x=document.forms["form1"]["Email"].value;										//validate the email
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)								//check for the "@" and "."
      {
      alert("Not a valid e-mail address.");
      return false;
      }
    
    
    var x=document.forms["form1"]["Card"].value;										//validate the card field
    if (x==null || x=="")
      {
      alert("Please fill in your Card number.");										//show message if empty
      return false;
      }
    
    }
    
    function calcTix(frm){
    if (frm.dates.value==""){
    alert("please choose dates")
    return;
    }else if (frm.tix.value==""){
    alert("please choose number of tickets")
    return;
    } else{
    frm.total.value="&#163;"+frm.dates.value*frm.tix.value;
    	}
    }
    </script>
    
    
    </head>
    
    
    <body>
    
    <!--offer choices-->
    
    <br>
    <br>
    <h4>Select Your Chosen Ticket: </h4>
    <!--form to enter details-->
    
    
    <form name = "form1">
    <select name="dates">
    
    <option value="">Select Ticket</option>
    
    <option value=30>London, 17th July - &#163;30</option>
    <option value=45>London, 17th July - &#163;45</option>
    <option value=70>London, 17th July - &#163;70</option>
    <option value=30>London, 18th July - &#163;30</option>
    <option value=45>London, 18th July - &#163;45</option>
    <option value=70>London, 18th July - &#163;70</option>
    <option> </option>
    
    <option value=25>Manchester, 21st July - &#163;25</option>
    <option value=35>Manchester, 21st July - &#163;35</option>
    <option value=45>Manchester, 21st July - &#163;45</option>
    <option value=70>Manchester, 21st July - &#163;70</option>
    
    
    </select>
    
    <!--number of tickets-->
    <br>
    <br>
    <br>
    <br>
    <h4>Select The Number of Tickets:</h4>
    (maximum of 6)
    
    <br>
    <br>
    <select name="tix">
    
    <option value="">Select Ticket</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>
    
    </select>
    <br><br>
    <input type="button" value="confirm price" onclick="calcTix(this.form)"/> 
    Total price is:<input name="total"type="text"/>
    <br><br><br><br><br>
    
    
    <h2>Please Enter Your Details Below.</h2>
    
    
    <b>Name:</b> <br /><input type="text" name="Name" value="" size="30" maxlength="50" /> <br><br>
    	
    <b>Address:</b><br>
    <input type="text" name="Address1" value="Line 1" size="30" maxlength="50" />
    <br><input type="text" name="Address2" value="Line 2" size="30" maxlength="50" />
    <br><input type="text" name="Address3" value="Town/City" size="30" maxlength="50" />
    <br><input type="text" name="Address4" value="Postcode" size="30" maxlength="50" />
    
    <br><br><b>Telephone:</b> <br /><input type="text" name="Phone" value="" size="30" maxlength="11" /> <br><br>
       
    <b>Email:</b><br><input type="text" name="Email" value="" size="30" maxlength="16" /><br><br>
    
    
    <b>Card Number:</b><br><input type="text" name="Card" value="" size="30" maxlength="50" />
    
    </form>
    
    <br><br>
    
    <input type="submit" value="Buy Tickets" onclick="validate();" />													<!--submit button-->
    
    </center>
    
    
    </body>
    
    
    </html>
    Last edited by xelawho; 04-26-2012 at 12:16 PM.

  7. #7
    Join Date
    Mar 2012
    Posts
    21
    Thanks! That is fantastic and I actually understand it!

    My last question.. what if I wanted to charge say like &#163;10 extra if they bought 4 tickets or more, how would I write that part?

    Would I put? :
    Code:
    <option value=4 + 10>4 </option>
    <option value=5 = 10>5 </option>
    <option value=5 + 10>6 </option>
    All I want is the price adding &#163;10 extra if they have chosen to buy 4 tickets or more..



    Thanks!

  8. #8
    Join Date
    Nov 2010
    Posts
    1,031
    a flat 10 on top of the calculated total? better to do it inside the function...

    Code:
    function calcTix(frm){
    if (frm.dates.value==""){
    alert("please choose dates")
    return;
    }else if (frm.tix.value==""){
    alert("please choose number of tickets")
    return;
    } else{
    var extra=frm.tix.value>3?10:0;
    frm.total.value=""+Number(frm.dates.value*frm.tix.value+extra);
    	}
    }
    ... although the consumer/tightwad in me asks what happened to discounts for buying in bulk?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles