Booking multiple seats under one name and manipulating amount field

Introduction

The following example will show how you can implement a booking for multiple seats, charge for it and adjust the amount accordingly. For example, if a single seat costs $50, and the customer is booking in 3 seats, the following code will adjust the amount to $150 and also allow the customer to enter the additional customer names which will be collected and stored against the booking inside the CRM.

Step 1.

First thing you need to do is to download the jQuery library, upload it to your site and link it to the site-wide template which is wrapped around the detailed booking layout or use can place a link such as this one inside that template:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
		
You can set the template unside the booking details, under Modules -> Bookings.

Step 2.

The next thing you need to do is to download the file called bookings.js and link it to your site-wide template which is wrapped around the bookings or link it to your detailed bookings layout. You can download the file here. The link will look something like this:

<script type="text/javascript" src="/js/bookings.js"></script> 
        
Note that my file is inside the folder called "js" and if you have uploaded the file into some other folder, in which case you need to update the file path in the link above.

The script looks like this:

Step 3.

The next thing you need to do is open the bookings.js file and change the value of the "bookingAmount" variable from 50 to whatever you charge your customers for a single seat. Note that the number of seats in this example will simply be multiplied by the amount you specify in "bookingAmount" variable. You can expand this simple logic in this file to introduce things such as volume prices, where you can give customers discounts if they are booking more than one seat, but this demo will not go into such detail.

Step 4.

Now we need to create a form that will go onto the detail booking layout or inside the booking details in case you have different forms for every booking. The for in this example contains fields for the additional seats, so that the person filling in the form can add additional names to submission. To create your booking form go to Modules -> Web forms and create a standard form and create the additional custom fields for the people's names or email addresses. In my example I have created 3 additional fields for the attendees names, because I will offer up to 3 seats per booking. But you can create more or less fields, depending on your requirement. The image of the code is below. You can click on the booking link on the bottom of the page to obtain the actual HTML.

Step 5.

Add id="form" to the form tag

<form id="form" action="/FormProcessv2.aspx?WebFormID=

Add the dropdown for the number of seats. Make sure you add this dropdown to the beginning of the form.

<label for="seats">How many seats would you like to book?</label><br />
<select class="cat_dropdown" id="seats" name="seats">
	<option value=" ">-- Please select --</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
		
Add the field that will capture the number of seats and hide it
<tr style="display:none">
	<td><label for="BookingAllocation">Booking Seats</label><br />
	<input class="cat_textbox" id="BookingAllocation" name="BookingAllocation" /></td>
</tr>
		

Hide the amount field and make it read only.

<input type="text" class="cat_textbox" id="Amount" name="Amount" style="display:none" readonly="readonly"/>

Add the following CSS code to the head of the page or add it to a CSS file which is linked to this template. This CSS code will hide the form initially, whih will be displayed by JavaScript later on when the number os seats in the dropdown is selected:

		<style type="text/css">
			.hide{
			display:none;
			}
			.hideform{
			display:none;
			}
			.total{
			color:red;
			font-size:36px;
			}
        </style>
        
Finally, add class="person1 hide" to the additional names fields and change person1 class to person2, person3 and so on.

Working Example

The following is the working examle. Please feel free to experiment with it and copy the code.
If you wish to see it inside the booking please go to https://demo.worldsecuresystems.com/BookingRetrieve.aspx?ID=31310


* Required