|
|
|
|
@ -5,6 +5,136 @@
|
|
|
|
|
<div class="InquiryBox">
|
|
|
|
|
<textarea id="form_additionalrequirements" name="form_additionalrequirements"
|
|
|
|
|
placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food... (optional)"></textarea>
|
|
|
|
|
<div class="selectionBlock">
|
|
|
|
|
<h4>
|
|
|
|
|
Number in your group
|
|
|
|
|
</h4>
|
|
|
|
|
<div id="group_error_msg" style="display: none">
|
|
|
|
|
<div class="requiredArea" style="margin-top:-10px;">Please select number in your group.</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="travel_group">
|
|
|
|
|
<input type="radio" value="Family" id="Family" name="travel group">
|
|
|
|
|
<label for="Family" class="family">
|
|
|
|
|
Family
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="travel_group">
|
|
|
|
|
<input type="radio" value="Couple" id="Couple" name="travel group">
|
|
|
|
|
<label for="Couple" class="couple">
|
|
|
|
|
Couple
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="travel_group">
|
|
|
|
|
<input type="radio" value="Solo" id="Solo" name="travel group">
|
|
|
|
|
<label for="Solo" class="solo">
|
|
|
|
|
Solo
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="travel_group">
|
|
|
|
|
<input type="radio" value="group" id="Other" name="travel group">
|
|
|
|
|
<label for="Other" class="group">
|
|
|
|
|
Other group
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="adultBlock" style="display: none">
|
|
|
|
|
<p style="
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
">When you plan to take the trip:</p>
|
|
|
|
|
<div class="peopleSelect">
|
|
|
|
|
<p style="margin-top: 20px;"><strong>
|
|
|
|
|
Adults (≥18 years old)
|
|
|
|
|
</strong> </p>
|
|
|
|
|
<button class="minaddBtn reduceadult" id="minusAdult" type="button"
|
|
|
|
|
value="-">-</button>
|
|
|
|
|
<input class="number" type="text" value="2" id="adultNumber" name="adult">
|
|
|
|
|
<button class="minaddBtn addadult" type="button" id="plusAdult" value="+">+</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="age_range">
|
|
|
|
|
<p>
|
|
|
|
|
Adults' ages
|
|
|
|
|
</p>
|
|
|
|
|
<div class="checkYes" style="float:left;">
|
|
|
|
|
<label for="65+">
|
|
|
|
|
<input type="checkbox" value="yes" name="age 65 plus" id="65+" class="checkBorder" >65+
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkYes" style="float:left;">
|
|
|
|
|
<label for="51-64">
|
|
|
|
|
<input type="checkbox" value="yes" name="age 51 64" id="51-64" class="checkBorder" >51-64
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkYes" style="float:left;">
|
|
|
|
|
<label for="41-50">
|
|
|
|
|
<input type="checkbox" value="yes" name="age 41 50" id="41-50" class="checkBorder" >41-50
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkYes" style="float:left;">
|
|
|
|
|
<label for="31-40">
|
|
|
|
|
<input type="checkbox" value="yes" name="age 31 40" id="31-40" class="checkBorder" >31-40
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkYes" style="float:left;">
|
|
|
|
|
<label for="18-30">
|
|
|
|
|
<input type="checkbox" value="yes" name="age 18 30" id="18-30" class="checkBorder" >18-30
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
<div id="childrenBlock" style="display: none">
|
|
|
|
|
<p style="margin-top: 0;"><strong>Children</strong></p>
|
|
|
|
|
<div class="kids_age">
|
|
|
|
|
<p style="margin-bottom: 5px;">10-17 yrs old</p>
|
|
|
|
|
<select class="kids_number" id="teenagerNumber" name="teenager_10_17_yrs">
|
|
|
|
|
<option value="0">0
|
|
|
|
|
</option>
|
|
|
|
|
<option value="1">1
|
|
|
|
|
</option>
|
|
|
|
|
<option value="2">2
|
|
|
|
|
</option>
|
|
|
|
|
<option value="3">3
|
|
|
|
|
</option>
|
|
|
|
|
<option value="4">4
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="kids_age">
|
|
|
|
|
<p style="margin-bottom: 5px;">3-9 yrs old</p>
|
|
|
|
|
<select class="kids_number" id="childrenNumber" name="children_3_9_yrs">
|
|
|
|
|
<option value="0">0
|
|
|
|
|
</option>
|
|
|
|
|
<option value="1">1
|
|
|
|
|
</option>
|
|
|
|
|
|
|
|
|
|
<option value="2">2
|
|
|
|
|
</option>
|
|
|
|
|
<option value="3">3
|
|
|
|
|
</option>
|
|
|
|
|
<option value="4">4
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="kids_age">
|
|
|
|
|
<p style="margin-bottom: 5px;">0-2 yrs old</p>
|
|
|
|
|
<select class="kids_number" id="infantNumber" name="infant_0_2_yrs">
|
|
|
|
|
<option value="0">0
|
|
|
|
|
</option>
|
|
|
|
|
<option value="1">1
|
|
|
|
|
</option>
|
|
|
|
|
<option value="2">2
|
|
|
|
|
</option>
|
|
|
|
|
<option value="3">3
|
|
|
|
|
</option>
|
|
|
|
|
<option value="4">4
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
<span class="inquiry_form_tag"><img src="https://data.chinahighlights.com/pic/input-name.png">
|
|
|
|
|
<span class="form_required">*</span>
|
|
|
|
|
@ -679,4 +809,86 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
var $adultBlock = $('#adultBlock');
|
|
|
|
|
var $childrenBlock = $('#childrenBlock');
|
|
|
|
|
var $adultNumberInput = $('#adultNumber');
|
|
|
|
|
var adultNumber = $adultNumberInput.val();
|
|
|
|
|
var $teenagerNumberInput = $('#teenagerNumber');
|
|
|
|
|
var teenagerNumber = $teenagerNumberInput.val();
|
|
|
|
|
var $childrenNumberInput = $('#childrenNumber');
|
|
|
|
|
var childrenNumber = $childrenNumberInput.val();
|
|
|
|
|
var $infantNumberInput = $('#infantNumber');
|
|
|
|
|
var infantNumber = $infantNumberInput.val();
|
|
|
|
|
$('input[name="travel group"]').each((i, groupEle) => {
|
|
|
|
|
$(groupEle).click(function (e) {
|
|
|
|
|
|
|
|
|
|
$teenagerNumberInput.val(0);
|
|
|
|
|
$childrenNumberInput.val(0);
|
|
|
|
|
$infantNumberInput.val(0);
|
|
|
|
|
|
|
|
|
|
var currentTarget = e.currentTarget;
|
|
|
|
|
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
|
|
|
|
|
$adultBlock.show();
|
|
|
|
|
$childrenBlock.show();
|
|
|
|
|
} else {
|
|
|
|
|
$adultBlock.show();
|
|
|
|
|
$childrenBlock.hide();
|
|
|
|
|
}
|
|
|
|
|
if (currentTarget.id === 'Couple') {
|
|
|
|
|
$adultNumberInput.val(2);
|
|
|
|
|
} else if (currentTarget.id === 'Solo') {
|
|
|
|
|
$adultNumberInput.val(1);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//成人
|
|
|
|
|
$('#plusAdult').click(function () {
|
|
|
|
|
adultNumber++;
|
|
|
|
|
$adultNumberInput.val(adultNumber);
|
|
|
|
|
});
|
|
|
|
|
$('#minusAdult').click(function () {
|
|
|
|
|
if (adultNumber > 1) {
|
|
|
|
|
adultNumber--;
|
|
|
|
|
$adultNumberInput.val(adultNumber);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 青少年
|
|
|
|
|
$('#plusTeenager').click(function () {
|
|
|
|
|
teenagerNumber++;
|
|
|
|
|
$teenagerNumberInput.val(teenagerNumber);
|
|
|
|
|
});
|
|
|
|
|
$('#minusTeenager').click(function () {
|
|
|
|
|
if (teenagerNumber > 0) {
|
|
|
|
|
teenagerNumber--;
|
|
|
|
|
$teenagerNumberInput.val(teenagerNumber);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 儿童
|
|
|
|
|
$('#plusChildren').click(function () {
|
|
|
|
|
childrenNumber++;
|
|
|
|
|
$childrenNumberInput.val(childrenNumber);
|
|
|
|
|
});
|
|
|
|
|
$('#minusChildren').click(function () {
|
|
|
|
|
if (childrenNumber > 0) {
|
|
|
|
|
childrenNumber--;
|
|
|
|
|
$childrenNumberInput.val(childrenNumber);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 婴儿
|
|
|
|
|
$('#plusInfant').click(function () {
|
|
|
|
|
infantNumber++;
|
|
|
|
|
$infantNumberInput.val(infantNumber);
|
|
|
|
|
});
|
|
|
|
|
$('#minusInfant').click(function () {
|
|
|
|
|
if (infantNumber > 0) {
|
|
|
|
|
infantNumber--;
|
|
|
|
|
$infantNumberInput.val(infantNumber);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
candice
3 years ago