calculating price in javascript

This site is best viewed in a modern browser with JavaScript enabled.

jamesy23

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?


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

WolfShade

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.

<select name="numTix" id="numTix" onChange="calcTix();">
<option [COLOR="Red"]value=0[/COLOR]>Select Ticket</option>
<option [COLOR="Red"]value=1[/COLOR]>1 </option>
<option [COLOR="Red"]value=2[/COLOR]>2 </option>
<option [COLOR="Red"]value=3[/COLOR]>3 </option>
<option [COLOR="Red"]value=4[/COLOR]>4 </option>
<option [COLOR="Red"]value=5[/COLOR]>5 </option>
<option [COLOR="Red"]value=6[/COLOR]>6 </option>

</select>
<input type="hidden" name="tixPrice" id="tixPrice" value=88 />
<input type="text" name="tixTotal" id="tixTotal" value="" />

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;
  }

xelawho

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:

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

jamesy23

Thank you, WolfShade!

I think I understand haha.

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!

jamesy23

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:

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

xelawho

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

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

jamesy23

Thanks! That is fantastic and I actually understand it!

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

Would I put? :

<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 £10 extra if they have chosen to buy 4 tickets or more..

Thanks!

xelawho

a flat 10 on top of the calculated total? better to do it inside the function...

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?