CAE5942
asked on
Extending an events booking form to add multiple guests
Hi everyone,
I'm working on an event bookings form but need to extend it a bit further so that people can add guests to their booking. In the code showing at the end of this post, I've added in a button:
I've also added in 10 x input fields like this one:
In addition to the fields mentioned above, I also added in the following input field to hold the total amount of bookings:
All input fields for the guest names would need to be hidden and would only be revealed one at time whenever someone clicked the "Add a guest" button.
The total number of seats booked would then need to be calculated and inserted into the input field called "Number of seats booked". It's assumed that the person making the booking, ie. the person whose name is in the first and last name fields will be attending the event, so the total number of seats would include that person plus all the guests, ie. the total number of input fields revealed. This field that holds the number of seats booked would be hidden and would only be revealed if someone actually added a guest, otherwise, it's assumed that it's for a single booking only.
The number in the amount field at the bottom of the form would need to update depending on how many seats were booked.
Currently when the page loads, the number in the amount input field is reflecting the amount in the following span:
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
The following is the code that populates the amount field based on the above span value:
This amount would need to remain in place when the page loads as this would be the ticket price based on 1 booking, therefore, when the calculation is made to update the price in the amount input field to reflect the amount of seats being purchased, I'm assuming it would have to use the figure in the markup below:
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
I'd really appreciate any help to get this going.
Thanks so much in advance.
I'm working on an event bookings form but need to extend it a bit further so that people can add guests to their booking. In the code showing at the end of this post, I've added in a button:
<tr>
<td><label>Would you like to add guests to your booking? (Max 10)</label><br /> <input class="cat_button" type="button" value="Add a Guest" id="catwebformbutton" /></td>
</tr> I've also added in 10 x input fields like this one:
<tr>
<td><label for="CAT_Custom_331038_129864">Guest Name 1</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331038_129864" id="CAT_Custom_331038_129864" class="cat_textbox" /></td>
</tr>In addition to the fields mentioned above, I also added in the following input field to hold the total amount of bookings:
<tr>
<td style="display:none"><label for="BookingAllocation">Number of seats booked</label><br />
<input type="text" maxlength="4000" name="BookingAllocation" id="BookingAllocation" class="cat_textbox" /></td>
</tr>All input fields for the guest names would need to be hidden and would only be revealed one at time whenever someone clicked the "Add a guest" button.
The total number of seats booked would then need to be calculated and inserted into the input field called "Number of seats booked". It's assumed that the person making the booking, ie. the person whose name is in the first and last name fields will be attending the event, so the total number of seats would include that person plus all the guests, ie. the total number of input fields revealed. This field that holds the number of seats booked would be hidden and would only be revealed if someone actually added a guest, otherwise, it's assumed that it's for a single booking only.
The number in the amount field at the bottom of the form would need to update depending on how many seats were booked.
Currently when the page loads, the number in the amount input field is reflecting the amount in the following span:
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
The following is the code that populates the amount field based on the above span value:
<script>
// Updates the amount form field on event registration form
$('#Amount').val(parseFloat($('#event-price').text()).toFixed(2));
</script>This amount would need to remain in place when the page loads as this would be the ticket price based on 1 booking, therefore, when the calculation is made to update the price in the amount input field to reflect the amount of seats being purchased, I'm assuming it would have to use the figure in the markup below:
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
I'd really appreciate any help to get this going.
Thanks so much in advance.
<script type="text/javascript">
$(function () {
// redirect to non-secure version of page
$("a").each(function (idx) {
var href = $(this).attr("href");
if (href.indexOf("http") == -1 && href.indexOf("https") == -1) {
href = '{module_webapps,0,i,17464 template="/_settings/site-url"}' + href;
$(this).attr("href", href);
}
});
});
</script>
<script src="/_assets/js/jquery-1.10.2.min.js"></script>
<script src="/_assets/js/bookings.js"></script>
<script>
$(document).ready(function() {
$('#creditCardType , #payOffline').hide();
$('.creditCard').click(function() {
$('#creditCardType').toggle();
$('#payOffline').hide();
});
$('.payPal').click(function() {
$('#creditCardType').hide();
$('#payOffline').hide();
});
$('.payOffline').click(function() {
$('#payOffline').toggle();
$('#creditCardType').hide();
});
});
</script>
<script type="text/javascript">
$(function(){
var pfull = $(".meter").data("pfull");
$(".meter").css("width",pfull)
});
</script>
<form name="catwebformform61297" method="post" onsubmit="return checkWholeForm61297(this)" enctype="multipart/form-data" action="https://newsite.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&OID={tag_bookingid}&OTYPE=61&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<h4><em class="icon-edit"></em> Enter your booking</h4>
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="913142">Dr</option>
<option value="913141">Miss</option>
<option value="913138" selected="selected">Mr</option>
<option value="913139">Mrs</option>
<option value="913140">Ms</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_331037_129864">Any special dietary requirements?</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331037_129864" id="CAT_Custom_331037_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label>Would you like to add guests to your booking? (Max 10)</label><br /> <input class="cat_button" type="button" value="Add a Guest" id="catwebformbutton" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331038_129864">Guest Name 1</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331038_129864" id="CAT_Custom_331038_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331039_129864">Guest Name 2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331039_129864" id="CAT_Custom_331039_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331040_129864">Guest Name 3</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331040_129864" id="CAT_Custom_331040_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331041_129864">Guest Name 4</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331041_129864" id="CAT_Custom_331041_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331042_129864">Guest Name 5</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331042_129864" id="CAT_Custom_331042_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331043_129864">Guest Name 6</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331043_129864" id="CAT_Custom_331043_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331044_129864">Guest Name 7</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331044_129864" id="CAT_Custom_331044_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331045_129864">Guest Name 8</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331045_129864" id="CAT_Custom_331045_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331046_129864">Guest Name 9</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331046_129864" id="CAT_Custom_331046_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331047_129864">Guest Name 10</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331047_129864" id="CAT_Custom_331047_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td style="display:none"><label for="BookingAllocation">Number of seats booked</label><br />
<input type="text" maxlength="4000" name="BookingAllocation" id="BookingAllocation" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input type="text" name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input type="text" name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input type="text" name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input type="text" name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AQ">ANTARCTICA</option>
<option value="AG">ANTIGUA AND BARBUDA</option>
<option value="AR">ARGENTINA</option>
<option value="AM">ARMENIA</option>
<option value="AW">ARUBA</option>
<option value="AU">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<p class="payPal close-space"><input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal</p>
<p class="payOffline close-space"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" /> Pay Offline</p>
<div id="payOffline">
<table style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td>
<p style="margin: 0px; padding: 0px;"> If you would like to pay offline, download this form.
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="creditCard" style="margin: 0px; padding: 0px;"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card</p>
<div id="creditCardType" style="margin: 0px; padding: 0px;">
<table style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></td>
</tr>
<tr>
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
</select></td>
</tr>
<tr>
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label>
<br />
<input type="text" name="Amount" id="Amount" class="cat_textbox"/></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://newsite.businesscatalyst.com/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount61297 = 0;
function checkWholeForm61297(theForm) {
var why = "";
if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
}
if (why != "") {
alert(why);
return false;
}
if (submitcount61297 == 0) {
submitcount61297++;
theForm.submit();
return false;
} else {
alert("Form submission is in progress.");
return false;
}
}//]]>
</script>
</form>
<!-- END .booking-container -->ASKER
Thanks for the reply,
The only problem with removing all the fields and adding code to programatically add them back one at a time is that each input needs to keep its own unique numbering. Take the following two fields as an example:
You'll notice that the number 129864 is the same for both fields (and needs to be kept) however the first number on the first field is 331038 and the number on the second field is 331039. These numbers change for each field and need to remain due to the CMS that I'm using. As you can see these numbers apply to the for, name and id attributes.
Is there a way to adjust the code that you supplied so that the numbering will increment so that when someone inserts another field, the numbering is correct to suit the CMS?
Thanks for your support.
The only problem with removing all the fields and adding code to programatically add them back one at a time is that each input needs to keep its own unique numbering. Take the following two fields as an example:
<tr>
<td><label for="CAT_Custom_331038_129864">Guest Name 1</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331038_129864" id="CAT_Custom_331038_129864" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_331039_129864">Guest Name 2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_331039_129864" id="CAT_Custom_331039_129864" class="cat_textbox" /></td>
</tr>You'll notice that the number 129864 is the same for both fields (and needs to be kept) however the first number on the first field is 331038 and the number on the second field is 331039. These numbers change for each field and need to remain due to the CMS that I'm using. As you can see these numbers apply to the for, name and id attributes.
Is there a way to adjust the code that you supplied so that the numbering will increment so that when someone inserts another field, the numbering is correct to suit the CMS?
Thanks for your support.
I did not see the number in the middle change. Hence I just added my own.
We could increment the middle number but you would have to reserve 10 numbers.
I change the code back to hiding instead - please add the class of guestrow to the rows to be hidden .
I need to go away, but will fix the code later. It will look like
and use
var numberOfGuests = $('.guestrow').find('.cat_
to calculate
We could increment the middle number but you would have to reserve 10 numbers.
I change the code back to hiding instead - please add the class of guestrow to the rows to be hidden .
I need to go away, but will fix the code later. It will look like
var guests = 0;
$(function () {
$("#catwebformbutton").on("click", function () {
guests++;
if (guests<=10) {
$(".guestbox").eq(guest-1).show();
}
});
});and use
var numberOfGuests = $('.guestrow').find('.cat_
to calculate
ASKER
Thanks for continuing with this,
With regard to reserving 10 numbers in order to increment them, this wouldn't be a problem because the cms that I'm using always creates these unique numbers for the custom input fields. For example in the form that I'm working on, the numbers go from 331038 to 331047, but these numbers appear in the "for", "name" and "id" attributes so I'm not sure if you can increment the numbers for all 3 of these.
I'm not sure which is the best way to go, ie. to increment the numbers or to hide them. If someone clicks the "Add a guest" button 10 times to add all 10 input fields but then decides that they only want 5, they would need a way to remove the ones that they no longer need, so is it possible to have some link text next to each input field that allows the user to remove them if needed? If this is possible then would the incrementing way be best or the hiding of the fields. The problem I see with hiding the fields is that if someone typed a name in the field but then click the link text that says "remove this guest" then this would only be hiding the table row but not actually removing the text within it, so that when they submit the form they would actually be adding that person to the booking. Could you advise me on the best way to do this, ie. hiding or incrementing?
With regard to the calculation, I have the following Booking Allocation field below the "Add a guest" fields:
This would need to remain hidden and only be revealed if someone clicked the "Add a guest" button. If 1 or more guest input fields were revealed, then the total number of bookings would need to be calculated and entered into the Booking Allocation field. So if there were 2 guest fields, then the number shown in the Booking Allocation field would 3. If there were 7 guest fields then the number shown would be 8, ie. the person making the booking plus the number of guests.
Also, as mentioned in my original question, the value in the "Amount" field would need to then be calculated by multiplying the number in the Booking Allocation field by the price of the event.
The price of the event will always be stored in the following span which has an id of "event-price":
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
Is it possible to produce code that would multiply the figure in the booking allocation field by the figure in the above span and then have that appear as the price in the amount field?
Thanks again for your continued support.
With regard to reserving 10 numbers in order to increment them, this wouldn't be a problem because the cms that I'm using always creates these unique numbers for the custom input fields. For example in the form that I'm working on, the numbers go from 331038 to 331047, but these numbers appear in the "for", "name" and "id" attributes so I'm not sure if you can increment the numbers for all 3 of these.
I'm not sure which is the best way to go, ie. to increment the numbers or to hide them. If someone clicks the "Add a guest" button 10 times to add all 10 input fields but then decides that they only want 5, they would need a way to remove the ones that they no longer need, so is it possible to have some link text next to each input field that allows the user to remove them if needed? If this is possible then would the incrementing way be best or the hiding of the fields. The problem I see with hiding the fields is that if someone typed a name in the field but then click the link text that says "remove this guest" then this would only be hiding the table row but not actually removing the text within it, so that when they submit the form they would actually be adding that person to the booking. Could you advise me on the best way to do this, ie. hiding or incrementing?
With regard to the calculation, I have the following Booking Allocation field below the "Add a guest" fields:
<tr>
<td style="display:none"><label for="BookingAllocation">Number of seats booked</label><br />
<input type="text" maxlength="4000" name="BookingAllocation" id="BookingAllocation" class="cat_textbox" /></td>
</tr>This would need to remain hidden and only be revealed if someone clicked the "Add a guest" button. If 1 or more guest input fields were revealed, then the total number of bookings would need to be calculated and entered into the Booking Allocation field. So if there were 2 guest fields, then the number shown in the Booking Allocation field would 3. If there were 7 guest fields then the number shown would be 8, ie. the person making the booking plus the number of guests.
Also, as mentioned in my original question, the value in the "Amount" field would need to then be calculated by multiplying the number in the Booking Allocation field by the price of the event.
The price of the event will always be stored in the following span which has an id of "event-price":
<p><strong>Cost:</strong> $<span id="event-price">{tag_even
Is it possible to produce code that would multiply the figure in the booking allocation field by the figure in the above span and then have that appear as the price in the amount field?
Thanks again for your continued support.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I just wanted to thank you so much for this - it's just great.
I noticed that the number inserted into the booking allocation field is the total amount of guests booked whereas I wondered if it was possible to make that number the total number of guests plus the person making the booking so if there were 3 guest fields then the number in the booking allocation field would be 4, i.e. 3 guests + the person making the booking. I just thought that would help the person making the booking because they would just need to look at the number of seats booked and multiply it by the event price so that they could see how we came up with the figure in the amount field.
Is that hard to do or do you think this is a good idea?
Thanks so much again.
I noticed that the number inserted into the booking allocation field is the total amount of guests booked whereas I wondered if it was possible to make that number the total number of guests plus the person making the booking so if there were 3 guest fields then the number in the booking allocation field would be 4, i.e. 3 guests + the person making the booking. I just thought that would help the person making the booking because they would just need to look at the number of seats booked and multiply it by the event price so that they could see how we came up with the figure in the amount field.
Is that hard to do or do you think this is a good idea?
Thanks so much again.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you so much for your help - I really appreciate it. All is working well now.
http://jsfiddle.net/mplungjan/GPL5Q/
I have removed all guests and given the row before an ID - I also make unique IDs for the fields
Open in new window
Now all you have to do is to multiply guest price with $('.cat_textbox[value!=""]