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

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>
<div class="traveler_info">
<h3 data-header>Traveler 1</h3>
<h3 data-header>Primary contact</h3>
<div class="selectionBlock">
<select name="gender[]" class="gender_pick">
<option value="100001">Mr.</option>
@ -670,7 +670,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="665">Zambia</option>
<option value="666">Zimbabwe</option>
</select>
<div class="inputTerm" id='phoneNumberDiv'>
<input type="text" name="mobile" required="" class="number">
<label>
Phone number
</label>
</div>
<div class="selectionBlock">
<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="Others">Others</option>
</select>
</div>
<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 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 id="inquiryBox">
<h2>Your Flight Information (optional)</h2>
<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="inputTerm">
<input type="text" name="MEI_ArrivalFlightNo" required="">
<input type="text" name="MEI_ArrivalFlightNo">
<label>
Arrival flight No.
</label>
@ -768,7 +727,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock">
<p>Arrival date</p>
<div class="inputTerm">
<input type="date" name="MEI_ArrivalDate" required="">
<input type="date" name="MEI_ArrivalDate">
</div>
</div>
<div class="selectionBlock">
@ -779,7 +738,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div>
<div class="selectionBlock" style="width: 100%;">
<div class="inputTerm">
<input type="text" name="MEI_DepartureFlightNo" required="">
<input type="text" name="MEI_DepartureFlightNo">
<label>
Departure Flight No.
</label>
@ -788,7 +747,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
<div class="selectionBlock">
<p>Departure date</p>
<div class="inputTerm">
<input type="date" name="MEI_DepartureDate" required="">
<input type="date" name="MEI_DepartureDate">
</div>
</div>
<div class="selectionBlock">
@ -950,12 +909,25 @@ select.gender_pick {border: 1px solid #d1d1d1;
$(function() {
var $travelerTemplate = $(".traveler_info:first").clone();
//添加客户
$("#add_traveler_button").click(function() {
var $addTraveler = $travelerTemplate.clone();
$("#add_traveler_button").click(function () {addTraveler()});
function addTraveler() {
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);
$('#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>
</body>

@ -400,7 +400,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
reissuing of tickets would be at your expense!</p>
<div class="traveler_info">
<h3 data-header>Traveler 1</h3>
<h3 data-header>Primary contact</h3>
<div class="selectionBlock">
<select name="gender[]" class="gender_pick">
@ -672,7 +672,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
<option value="665">Zambia</option>
<option value="666">Zimbabwe</option>
</select>
<div class="inputTerm" id='phoneNumberDiv'>
<input type="text" name="mobile" required="" class="number">
<label>
Phone number
</label>
</div>
<div class="selectionBlock">
<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="Others">Others</option>
</select>
</div>
<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 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 id="inquiryBox">
<h2>Your Flight Information (optional)</h2>
<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="inputTerm">
<input type="text" name="MEI_ArrivalFlightNo" required="">
<input type="text" name="MEI_ArrivalFlightNo">
<label>
Arrival flight No.
</label>
@ -769,7 +728,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="datetime-local" name="MEI_ArrivalTime" required="">
<input type="datetime-local" name="MEI_ArrivalTime">
<label>
Arrival time
</label>
@ -777,7 +736,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="text" name="MEI_DepartureFlightNo" required="">
<input type="text" name="MEI_DepartureFlightNo">
<label>
Departure Flight No.
</label>
@ -785,7 +744,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div>
<div class="selectionBlock">
<div class="inputTerm">
<input type="datetime-local" name="MEI_DepartureTime" required="">
<input type="datetime-local" name="MEI_DepartureTime">
<label>
Departure time
</label>
@ -944,12 +903,25 @@ select.gender_pick {border: 1px solid #d1d1d1;
$(function() {
var $travelerTemplate = $(".traveler_info:first").clone();
//添加客户
$("#add_traveler_button").click(function() {
var $addTraveler = $travelerTemplate.clone();
$("#add_traveler_button").click(function () {addTraveler()});
function addTraveler() {
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);
$('#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>
</body>

Loading…
Cancel
Save