java script/jquery help for a a webform in the booking module

Report · Jun 04, 2012

I need to create a webform in the booking module where the first picket would cost X amount and all following tickets will be priced at Y. I already employ a "Booking multiple seats under one name" method but now I need help with the java script/jquery to be able to price the additional items differently.

Thank you,

Lana

Report · Jun 05, 2012

Do you have a URL of an example form you've already started on so we could possibly work from that?

Report · Jun 08, 2012

Here it is, thank you. Lana

<span class="req">*</span> Required

<tr>

<td><label for="Title">Title</label>

<br />

</select></td>

</tr>

<tr>

<td><label for="FirstName">First Name <span class="req">*</span></label>

<br />

</tr>

<tr>

<br />

</tr>

<tr>

<td><label for="WorkPhone">Phone Number <span class="req">*</span></label>

<br />

</tr>

<tr>

<td><label for="EmailAddress">Email Address <span class="req">*</span></label>

<br />

</tr>

<tr>

<td><label for="CAT_Custom_403255">Please select How many seats would you like to book? <span class="req">*</span></label>

<br />

<option value=" ">-- Please select --</option>

</select></td>

</tr>

<tr>

<td class="person1 hide"><label for="CAT_Custom_403265">Participant1</label>

<br />

</tr>

<tr>

<td class="person2 hide"><label for="CAT_Custom_403266">Participant2</label>

<br />

</tr>

<tr>

<td class="person3 hide"><label for="CAT_Custom_403267">Participant3</label>

<br />

</tr>

<tr>

<td class="person4 hide"><label for="CAT_Custom_403268">Participant4</label>

<br />

</tr>

<tr>

<td class="person5 hide"><label for="CAT_Custom_403269">Participant5</label>

<br />

</tr>

<tr>

<td class="person6 hide"><label for="CAT_Custom_403270">Participant6</label>

<br />

</tr>

<tr>

<td class="person7 hide"><label for="CAT_Custom_403271">Participant7</label>

<br />

</tr>

<tr>

<td class="person8 hide"><label for="CAT_Custom_403272">Participant8</label>

<br />

</tr>

<tr>

<td class="person9 hide"><label for="CAT_Custom_403274">Participant9</label>

<br />

</tr>

<tr>

<td class="person10 hide"><label for="CAT_Custom_403273">Participant10</label>

<br />

</tr>

<tr>

<td class="person11 hide"><label for="CAT_Custom_403275">Participant11</label>

<br />

</tr>

<tr>

<td class="person12 hide"><label for="CAT_Custom_403276">Participant12</label>

<br />

</tr>

<tr>

<td class="person13 hide"><label for="CAT_Custom_403277">Participant13</label>

<br />

</tr>

<tr>

<td class="person14 hide"><label for="CAT_Custom_403278">Participant14</label>

<br />

</tr>

<tr>

<br />

</tr>

<tr>

<td><label for="CardNumber">Card Number <span class="req">*</span></label>

<br />

</tr>

<tr>

<td><label>Card Expiry <span class="req">*</span></label>

<br />

</select>

</select></td>

</tr>

<tr>

<br />

<option value="2">Master Card</option>

<option value="4">American Express</option>

<option value="5">Diners Club</option>

</select></td>

</tr>

<tr>

<td><label for="CardCCV">CCV Number <span class="req">*</span></label>

<br />

</tr>

<tr>

<td><label for="Amount">Amount <span class="req">*</span> <span id='constraint-300-label'> (minimum: <span id='constraint-300'>1.00</span>)</span></label>

<br />

</tr>

<tr>

<td><label>I agree to Terms of <a href="https://thepaddlesup.worldsecuresystems.com/terms/waver" target="_blank">Waver</a> <span class="req">*</span></label>

<br />

I agree</td>

</tr>

<tr>

</tr>

</table>

//<![CDATA[

//]]>

</script>

</form>

$(document).ready(function(){

bookings();

});

</script></form>

Report · Jul 09, 2012

Hi,

I am using the same "Booking multiple seats under one name" method in a project needs a pricing structure as you describe. I edited the bookings.js as follows:

// Bookings multiple seats script

//By: Mario Gudelj

//modified by Janice McConnell to create 2 ticket prices and calculate total.

(function($){

bookings = function() {

var bookingAmount = 50; //Booking amount in dollars

var guestAmount = 100; //Booking abount variable for each guest - added code

$('#seats').change(function() {

$('.webform').fadeIn("slow");

var noOfSeats = $("#seats option:selected").val();//take the selected option from the dropdown

var noOfGuests = parseInt(noOfSeats) - 1; //The number to pay guestAmount for a ticket - added code

$('.hide').fadeOut("slow");

$('#BookingAllocation').val(noOfSeats); //set the number of seats

//totalAmount = bookingAmount * noOfSeats;

var totalAmount = memberAmount + guestAmount * noOfGuests; //New calculation based on number of tickets at each price

$('#Amount').val(totalAmount);

for(var index = noOfSeats; index > 0; index--){

$('.person'+index).fadeIn("slow");

}

$('.total').html("<span>TOTAL:"+totalAmount+"</span>");

});

}

})(jQuery);

I hope this helps.

Now if I can figure out how to create a usable report on bookings . . .

Report · Jul 10, 2012

Thank you so much for your help.

I know I'm pushing my luck with this Can you please also help with a discount code for the booking using the original js for multiple booking?

The coupon needs to work similar to discount code in e-commerce module but for booking, so when someone types in an input field called
“Discount”, for example, the correct set of numeric/alphabetical string, (example D5OFF) the total amount will change to reflect it. So if the price was $15.00 per session with the valid input of the code the price will become $10.00 for 1 booking. For two people (2x$15.00)-$5.00=$25.00 and so on.

If someone enters an invalid code the alert pop out should state "please enter the valid code" if someone fills out form without entering the code the transaction should continue as normal.

Again, thank you so much.

Lana

Report · Jul 11, 2012

I may be able to help you with this, but it will be a few days before I can look

at it. You may have it figured out by then.

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Jul 12, 2012

Few days is fine, I can wait. Thank you for your help.

Report · Jul 12, 2012

Try this:

// Bookings multiple seats script

//By: Mario Gudelj

// ammended by Janice McConnell to include use of discount codes. Note that an

input field for the discount code should be added to the html page.

(function($){

bookings = function() {

var discountAmount = 0;

var bookingAmount = 50; //Booking amount in dollars

$('#seats').change(function() {

$('.webform').fadeIn("slow");

var noOfSeats = $("#seats option:selected").val(); //take the selected option

from the dropdown

$('.hide').fadeOut("slow");

$('#BookingAllocation').val(noOfSeats); //set the number of seats

totalAmount = bookingAmount * noOfSeats - discountAmount;

$('#Amount').val(totalAmount);

for(var index = noOfSeats; index > 0; index--){

$('.person'+index).fadeIn("slow");

}

$('.total').html("TOTAL:"totalAmount"</span>");

});

//When user enters discount code and moves focus, this function fires.

$('#disCode').blur(function() {

var discountCode = $(this).val(); //get the discount code

//Compare discount code to the case values and set discount amount. Note all

codes and values should be added to switch statement

switch (discountCode) {

case 'DIS5':

discountAmount = 5;

break;

case 'DIS10':

discountAmount = 10;

break;

case '':

discountAmount = 0;

break;

default:

alert('Please enter the valid code');

}

var noOfSeats = $("#seats option:selected").val();

var newTotal = bookingAmount * noOfSeats - discountAmount; //Recalculate total

based on number of seats and then subtract discount

$('#Amount').val(newTotal); //set new Amount

});

}})(jQuery);

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Jul 12, 2012

Thank you, so far I got an error on line:

$('.total').html("TOTAL:"totalAmount"</span>");

Any idea why?

Thanks,

Lana

// Bookings multiple seats script

//By: Mario Gudelj

// ammended by Janice McConnell to include use of discount codes. Note that an input field for the discount code should be added to the html page.

(function($){

bookings = function() {

var discountAmount = 0;

var bookingAmount = 50; //Booking amount in dollars

$('#seats').change(function() {

$('.webform').fadeIn("slow");

var noOfSeats = $("#seats option:selected").val(); //take the selected option from the dropdown

$('.hide').fadeOut("slow");

$('#BookingAllocation').val(noOfSeats); //set the number of seats

totalAmount = bookingAmount * noOfSeats - discountAmount;

$('#Amount').val(totalAmount);

for(var index = noOfSeats; index > 0; index--){

$('.person'+index).fadeIn("slow");

}

$('.total').html("TOTAL:"totalAmount"</span>");

});

//When user enters discount code and moves focus, this function fires.

$('#disCode').blur(function() {

var discountCode = $(this).val(); //get the discount code

//Compare discount code to the case values and set discount amount. Note all codes and values should be added to switch statement

switch (discountCode) {

case 'DIS5':

discountAmount = 5;

break;

case 'DIS10':

discountAmount = 10;

break;

case '':

discountAmount = 0;

break;

default:

alert('Please enter the valid code');

}

var noOfSeats = $("#seats option:selected").val();

var newTotal = bookingAmount * noOfSeats - discountAmount; //Recalculate total based on number of seats and then subtract discount

$('#Amount').val(newTotal); //set new Amount

});

}})(jQuery);

Report · Jul 12, 2012

The line in the js file is:

$('.total').html("TOTAL:"totalAmount"</span>");

I notice your line desn't have the opening span tag. Do you have an element with

class="total"?

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Jul 13, 2012

That's what I have in html form:

do I need to add a field?

Thank you,

Lana

Report · Jul 13, 2012

Best guess is "no". You don't really need another field in your form. Take this

line out of the bookings.js:

$('.total').html("TOTAL:"totalAmount"</span>");

and don't add a field with that class.

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Jul 13, 2012

It works!!

Thank you so much.I just had to delete readonly=readonly for the amount input field (didn't want visitors to change the price) blur function did trigger it

Just curious if there is a way around it, otherwise, beautiful.

Thank you,

Lana

Report · Jul 13, 2012

Sorry about that. Add the 2 lines around the existing middle line:

$('#Amount').removeAttr('readonly');

$('#Amount').val(newTotal); //set new Amount

$('#Amount').attr('readonly','readonly');

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Jul 13, 2012

Amazing, totally worked Thank you, Lana

Report · Jul 13, 2012

Just popped in and noticed on your site that when you choose a number of participants in the booking, the form loses the decimal places no it doesn't resemble a dollar amount (at least USD). In order to maintain the decimal, just change line 15 of the bookings35.js file to this:

totalAmount = (bookingAmount * noOfSeats).toFixed(2);

You can see a demo I worked up at http://jsfiddle.net/BzqN5/

In my example, I changed the bookingAmount variable in the javascript to 12.75 to ensure that the decimals were being handled correctly. If you change it back to 35 and save the fiddle again, you can verify it works for round numbers too-- keeping the .00 at the end.

Report · Jul 15, 2012

Works great, thank you so much Lana

Report · Aug 25, 2012

Guys, I have followed this thread with interest and am implementing a similiar booking module. My question : is it possible to have a variable amount for multple events that works with the Multiple Seat Bookings under one name concept. I have the booking working with one amount but now have muplitple events with different pricing. Ie: 1st Event $96-00 2nd event $150.00.

When using this script can anyone tell me what the variable price should indicate or where in the form this should be indicated. I am so close but can't quite crack it and would really appreciate some help.

(function($){

bookings = function() {

var bookingAmount = 0.00; //Booking amount in dollars

$('#seats').change(function() {

$('.webform').fadeIn("slow");

var noOfSeats = $("#seats option:selected").val(); //take the selected option from the dropdown

$('.hide').fadeOut("slow");

$('#BookingAllocation').val(noOfSeats); //set the number of seats

totalAmount = (bookingAmount * noOfSeats).toFixed(2);

$('#Amount').val(totalAmount);

for(var index = noOfSeats; index > 0; index--){

$('.person'+index).fadeIn("slow");

}

$('.total').html("<span>TOTAL:"+totalAmount+"</span>");

});

};

})(jQuery);

Thanks in anticipation.

Rossco

Report · Aug 25, 2012

I set the cost for each event in the content of the event in the event modules

section. Then I added jquery code to get that amount for each event and use it

in the original code rather than hard-coding the amount in the original code.

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Aug 25, 2012

Janice I have applied the above code to my site wide template to act with all bookings with separate booking forms. Is there a way to enable one "booking multiple seats script " i(in template ) ie ; amount change with each No of Seatys allocation.and then have the booking form code display the separate price for each event. I have it working on one event but price is set in the template script. This has got me beaten. If not where are you seating the script wthin the individual event pricing.

Thanks for your help it is most appreciated.

Rossco

Report · Aug 25, 2012

We have an Events template that has a call to the script file. When you go to

the dashboard, select Modules>Events> and open a specific event, you will see

the Event Content field. This is where we have the details for each event and a

content-holder with the registration form. In the details section, we have an

element for the cost of the event with an id applied. When the event is opened

on the Events page, the code gets the text of the element, changes it to a

decimal number and sets the cost per ticket variable. Something like:

var bookingAmount = parseFloat($('#ticketCost').text(),10);

where "ticketCost" is the id of the element in the event description which

contains the price of the ticket. Make sure that the amount doesn't contain the

dollar sign. In one case,I made a span for the price with the dollar sign

outside the span. In another case, I tested for its presence and stripped it -

probably the better, cleaner way - I should mention that I am not an expert.

You ask " If not where are you seating the script wthin the individual event

pricing." If I understand your question - I'm not. The individual event pricing

is seated in the event content. The script is seated in the Events template.

This may not fit in with your design at all, but perhaps it will give you some

new ideas.

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

Report · Aug 26, 2012

Thanks so much Janice. This hasn't quite worked for our situation but have established new templates for each event which is great for now. Have everything working now in content holders which is perfect. Having a problem with trying to get the multiple seat names top display in the workflow. This seems to be a common problem with the BC Platform,, where only the email subscribers name appears in the booking. Do you know of any way that we can make all names subscribed appear to the booking. Thanks again your assistance was invaluable. Cheers from Aus.

Rossco

Report · Aug 26, 2012

My client was satisfied to have the names appear in a custom report. So we

"extended the CRM database" with a list of text fields for guests for the

registration form. Now we can do a custom report of "Customers and Bookings" and

add the CRM extension to the report. The report then shows the "guest" names

with each registrant's name.

I considered trying submitting multiple forms, but since this was working and

sufficient for the client, I didn't follow up on it.

Hope this helps.

Janice

Janice McConnell, CEO

MJ WebWizards, Inc.

5057 Strickland Rd

Gainesville, GA 30507

770-967-6742

java script/jquery help for a a webform in the booking module

1 Correct answer