客人信息收集表单优化需求

master
Jimmy Liow 2 years ago
parent a9354ae961
commit 0e5f3e708d

@ -399,7 +399,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
reissuing of tickets would be at your expense!</p> reissuing of tickets would be at your expense!</p>
<div class="traveler_info"> <div class="traveler_info">
<h3 data-header>Traveler 1</h3> <h3 data-header>Primary contact</h3>
<div class="selectionBlock"> <div class="selectionBlock">
<select name="gender[]" class="gender_pick"> <select name="gender[]" class="gender_pick">
<option value="100001">Mr.</option> <option value="100001">Mr.</option>
@ -670,7 +670,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="665">Zambia</option> <option value="665">Zambia</option>
<option value="666">Zimbabwe</option> <option value="666">Zimbabwe</option>
</select> </select>
<div class="inputTerm" id='phoneNumberDiv'>
<input type="text" name="mobile" required="" class="number">
<label>
Phone number
</label>
</div>
<div class="selectionBlock"> <div class="selectionBlock">
<p> Date of birth</p> <p> Date of birth</p>
@ -699,57 +704,11 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="Self-emloyed person">Self-emloyed person</option> <option value="Self-emloyed person">Self-emloyed person</option>
<option value="Others">Others</option> <option value="Others">Others</option>
</select> </select>
</div>
<button class="add_traveler_button" id="add_traveler_button" type="button">+ Add a traveler</button> <button class="add_traveler_button" id="add_traveler_button" type="button">+ Add a traveler</button>
</div>
<div id="inquiryBox">
<h2>Your contact information (optional)</h2>
<p>Having a phone number, especially with WhatsApp/iMessage capability will help us contact you in
case of emergency.</p>
<p>Phone No.</p>
<div class="inputTerm">
<input type="text" name="mobile" required="" class="number">
<label>
including country code and area code
</label>
</div>
<div class="selectionBlock">
<p>Home address</p>
<div class="inputTerm">
<input type="text" name="address_street" required="">
<label>
Street
</label>
</div>
</div> </div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_city" required="">
<label>
City
</label>
</div>
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_state" required="">
<label>
State
</label>
</div>
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_country" required="">
<label>
Country
</label>
</div>
</div>
</div> </div>
<div id="inquiryBox"> <div id="inquiryBox">
<h2>Your Flight Information (optional)</h2> <h2>Your Flight Information (optional)</h2>
<p>Your flight information will be forwarded to your guide/driver for airport pick up and drop off. <p>Your flight information will be forwarded to your guide/driver for airport pick up and drop off.
@ -759,7 +718,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock" style="width: 100%;"> <div class="selectionBlock" style="width: 100%;">
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="MEI_ArrivalFlightNo" required=""> <input type="text" name="MEI_ArrivalFlightNo">
<label> <label>
Arrival flight No. Arrival flight No.
</label> </label>
@ -768,7 +727,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock"> <div class="selectionBlock">
<p>Arrival date</p> <p>Arrival date</p>
<div class="inputTerm"> <div class="inputTerm">
<input type="date" name="MEI_ArrivalDate" required=""> <input type="date" name="MEI_ArrivalDate">
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
@ -779,7 +738,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div> </div>
<div class="selectionBlock" style="width: 100%;"> <div class="selectionBlock" style="width: 100%;">
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="MEI_DepartureFlightNo" required=""> <input type="text" name="MEI_DepartureFlightNo">
<label> <label>
Departure Flight No. Departure Flight No.
</label> </label>
@ -788,7 +747,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock"> <div class="selectionBlock">
<p>Departure date</p> <p>Departure date</p>
<div class="inputTerm"> <div class="inputTerm">
<input type="date" name="MEI_DepartureDate" required=""> <input type="date" name="MEI_DepartureDate">
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
@ -950,12 +909,25 @@ select.gender_pick {border: 1px solid #d1d1d1;
$(function() { $(function() {
var $travelerTemplate = $(".traveler_info:first").clone(); var $travelerTemplate = $(".traveler_info:first").clone();
//添加客户 //添加客户
$("#add_traveler_button").click(function() { $("#add_traveler_button").click(function () {addTraveler()});
var $addTraveler = $travelerTemplate.clone();
function addTraveler() {
var travelerCount = $(".traveler_info").length + 1; var travelerCount = $(".traveler_info").length + 1;
var travelerId = 'traveler' + travelerCount;
var $addTraveler = $travelerTemplate.clone();
$addTraveler.attr('id', travelerId);
$addTraveler.find('#phoneNumberDiv').remove();
$addTraveler.find('[data-header]').text('Traveler ' + travelerCount); $addTraveler.find('[data-header]').text('Traveler ' + travelerCount);
$('#add_traveler_button').before($addTraveler);
}); $addTravelerButton = $addTraveler.find('#add_traveler_button');
$addTravelerButton.attr('id', 'add_traveler_button' + travelerCount);
$addTravelerButton.click(function(){addTraveler()});
$deleteTravelerButton = $('<button class="add_traveler_button" type="button">- Delete Traveler ' + travelerCount + '</button>');
$deleteTravelerButton.click(function(){$('#'+travelerId).remove();});
$addTraveler.append($deleteTravelerButton);
$(".traveler_info:last").after($addTraveler);
}
}); });
</script> </script>
</body> </body>

@ -400,7 +400,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
reissuing of tickets would be at your expense!</p> reissuing of tickets would be at your expense!</p>
<div class="traveler_info"> <div class="traveler_info">
<h3 data-header>Traveler 1</h3> <h3 data-header>Primary contact</h3>
<div class="selectionBlock"> <div class="selectionBlock">
<select name="gender[]" class="gender_pick"> <select name="gender[]" class="gender_pick">
@ -672,7 +672,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="665">Zambia</option> <option value="665">Zambia</option>
<option value="666">Zimbabwe</option> <option value="666">Zimbabwe</option>
</select> </select>
<div class="inputTerm" id='phoneNumberDiv'>
<input type="text" name="mobile" required="" class="number">
<label>
Phone number
</label>
</div>
<div class="selectionBlock"> <div class="selectionBlock">
<p> Date of birth</p> <p> Date of birth</p>
@ -701,57 +706,11 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="Self-emloyed person">Self-emloyed person</option> <option value="Self-emloyed person">Self-emloyed person</option>
<option value="Others">Others</option> <option value="Others">Others</option>
</select> </select>
</div>
<button class="add_traveler_button" id="add_traveler_button" type="button">+ Add a traveler</button> <button class="add_traveler_button" id="add_traveler_button" type="button">+ Add a traveler</button>
</div>
<div id="inquiryBox">
<h2>Your contact information (optional)</h2>
<p>Having a phone number, especially with WhatsApp/iMessage capability will help us contact you in
case of emergency.</p>
<p>Phone No.</p>
<div class="inputTerm">
<input type="text" name="mobile" required="" class="number">
<label>
including country code and area code
</label>
</div>
<div class="selectionBlock">
<p>Home address</p>
<div class="inputTerm">
<input type="text" name="address_street" required="">
<label>
Street
</label>
</div>
</div> </div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_city" required="">
<label>
City
</label>
</div>
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_state" required="">
<label>
State
</label>
</div>
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="address_country" required="">
<label>
Country
</label>
</div>
</div>
</div> </div>
<div id="inquiryBox"> <div id="inquiryBox">
<h2>Your Flight Information (optional)</h2> <h2>Your Flight Information (optional)</h2>
<p>Your flight information will be forwarded to your guide/driver for airport pick up and drop off. <p>Your flight information will be forwarded to your guide/driver for airport pick up and drop off.
@ -761,7 +720,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock"> <div class="selectionBlock">
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="MEI_ArrivalFlightNo" required=""> <input type="text" name="MEI_ArrivalFlightNo">
<label> <label>
Arrival flight No. Arrival flight No.
</label> </label>
@ -769,7 +728,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<div class="inputTerm"> <div class="inputTerm">
<input type="datetime-local" name="MEI_ArrivalTime" required=""> <input type="datetime-local" name="MEI_ArrivalTime">
<label> <label>
Arrival time Arrival time
</label> </label>
@ -777,7 +736,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="MEI_DepartureFlightNo" required=""> <input type="text" name="MEI_DepartureFlightNo">
<label> <label>
Departure Flight No. Departure Flight No.
</label> </label>
@ -785,7 +744,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<div class="inputTerm"> <div class="inputTerm">
<input type="datetime-local" name="MEI_DepartureTime" required=""> <input type="datetime-local" name="MEI_DepartureTime">
<label> <label>
Departure time Departure time
</label> </label>
@ -944,12 +903,25 @@ select.gender_pick {border: 1px solid #d1d1d1;
$(function() { $(function() {
var $travelerTemplate = $(".traveler_info:first").clone(); var $travelerTemplate = $(".traveler_info:first").clone();
//添加客户 //添加客户
$("#add_traveler_button").click(function() { $("#add_traveler_button").click(function () {addTraveler()});
var $addTraveler = $travelerTemplate.clone();
function addTraveler() {
var travelerCount = $(".traveler_info").length + 1; var travelerCount = $(".traveler_info").length + 1;
var travelerId = 'traveler' + travelerCount;
var $addTraveler = $travelerTemplate.clone();
$addTraveler.attr('id', travelerId);
$addTraveler.find('#phoneNumberDiv').remove();
$addTraveler.find('[data-header]').text('Traveler ' + travelerCount); $addTraveler.find('[data-header]').text('Traveler ' + travelerCount);
$('#add_traveler_button').before($addTraveler);
}); $addTravelerButton = $addTraveler.find('#add_traveler_button');
$addTravelerButton.attr('id', 'add_traveler_button' + travelerCount);
$addTravelerButton.click(function(){addTraveler()});
$deleteTravelerButton = $('<button class="add_traveler_button" type="button">- Delete Traveler ' + travelerCount + '</button>');
$deleteTravelerButton.click(function(){$('#'+travelerId).remove();});
$addTraveler.append($deleteTravelerButton);
$(".traveler_info:last").after($addTraveler);
}
}); });
</script> </script>
</body> </body>

Loading…
Cancel
Save