修改表单

master
cyc 5 years ago
parent c605d1e366
commit ce77eeeffa

@ -129,8 +129,8 @@
<div class="clear"> <div class="clear">
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3> <h3 id="hotelselect">
Your hotel preference * Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please select an option.)</span>
</h3> </h3>
<span class="formNote"> <span class="formNote">
Hotels prices in Japan are at least doubled based on the suggested rates Hotels prices in Japan are at least doubled based on the suggested rates
@ -167,8 +167,8 @@
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3> <h3 id="numberselect">
Number in your group * Number in your group * <span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
</h3> </h3>
<div class="peopleSelect"> <div class="peopleSelect">
<span class="formMemo"> <span class="formMemo">
@ -194,8 +194,8 @@
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3> <h3 id="dateselect">
Your date of arrival * Your date of arrival * <span id="date_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
</h3> </h3>
<input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start" <input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start"
name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off"> name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off">
@ -336,12 +336,14 @@
</label> </label>
</div> </div>
</div> </div>
<span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="name" required> <input type="text" name="name" required>
<label> <label>
Full Name * Full Name *
</label> </label>
</div> </div>
<span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="email" name="email" required> <input type="email" name="email" required>
<label> <label>
@ -351,8 +353,9 @@
<div class="formMemo"> <div class="formMemo">
All your ticket issues will be sent to your mailbox. All your ticket issues will be sent to your mailbox.
</div> </div>
<span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="nationality" required> <input type="text" name="Nationality" required>
<label> <label>
Nationality / Region * Nationality / Region *
</label> </label>
@ -376,7 +379,7 @@
<div class="clear"> <div class="clear">
</div> </div>
<div class="inquiryBtn"> <div class="inquiryBtn">
<input type="submit" value="Start My Journey"> <button id="tmsubmit" href="javascript:;">Start My Journey</button>
</div> </div>
<input type="hidden" name="url" value="<?php echo $orderfrom;?>" /> <input type="hidden" name="url" value="<?php echo $orderfrom;?>" />
<input type="hidden" name="cli_sn" value="<?php echo $this->input->get_post('cli_sn');?>" /> <input type="hidden" name="cli_sn" value="<?php echo $this->input->get_post('cli_sn');?>" />
@ -438,5 +441,82 @@ $(function(){
$('.destination').html(destinantionstr); $('.destination').html(destinantionstr);
}); });
//表单验证
$('#tmsubmit').click(function(){
var adultnumber = $('input[name="adultnumber"]').val();
var hotel = $('input[name="hotel"]:checked').val();
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var Nationality = $('input[name="Nationality"]').val();
var date = $('input[name="Date_Start"]').val();
//酒店选择
if(hotel === undefined){
$("body,html").animate({
scrollTop: $('#hotelselect').offset().top - 70
});
$('#hotel_error_msg').removeClass('hidden');
setTimeout(function(){
$('#hotel_error_msg').addClass('hidden');
},5000);
return false;
}
//人数选择
if(adultnumber < 1){
$("body,html").animate({
scrollTop: $('#numberselect').offset().top - 70
});
$('#number_error_msg').removeClass('hidden');
setTimeout(function(){
$('#number_error_msg').addClass('hidden');
},5000);
return false;
}
//时间选择
if(date == ''){
$("body,html").animate({
scrollTop: $('#dateselect').offset().top - 70
});
$('#date_error_msg').removeClass('hidden');
setTimeout(function(){
$('#date_error_msg').addClass('hidden');
},5000);
return false;
}
//姓名验证
if(name == ''){
$('input[name="name"]').focus();
$('#name_error_msg').removeClass('hidden');
setTimeout(function(){
$('#name_error_msg').addClass('hidden');
},5000);
return false;
}
//邮箱验证
if(email == ''){
$('input[name="email"]').focus();
$('#email_error_msg').removeClass('hidden');
setTimeout(function(){
$('#email_error_msg').addClass('hidden');
},5000);
return false;
}
//国籍验证
if(Nationality == ''){
$('input[name="Nationality"]').focus();
$('#nation_error_msg').removeClass('hidden');
setTimeout(function(){
$('#nation_error_msg').addClass('hidden');
},5000);
return false;
}
});
}); });
</script> </script>

@ -58,8 +58,8 @@
<div class="clear"> <div class="clear">
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3> <h3 id="hotelselect">
Your hotel preference * Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please select an option. )</span>
</h3> </h3>
<span class="formNote"> <span class="formNote">
Hotels prices in Japan are at least doubled based on the suggested rates Hotels prices in Japan are at least doubled based on the suggested rates
@ -100,8 +100,8 @@
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3> <h3 id="numberselect">
Number in your group * Number in your group * <span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span>
</h3> </h3>
<div class="peopleSelect"> <div class="peopleSelect">
<span class="formMemo"> <span class="formMemo">
@ -267,12 +267,14 @@
</label> </label>
</div> </div>
</div> </div>
<span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="name" required> <input type="text" name="name" required>
<label> <label>
Full Name * Full Name *
</label> </label>
</div> </div>
<span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="email" name="email" required> <input type="email" name="email" required>
<label> <label>
@ -282,8 +284,9 @@
<span class="formMemo"> <span class="formMemo">
Your trip advisor will talk with you via email first. Your trip advisor will talk with you via email first.
</span> </span>
<span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="nationality" required> <input type="text" name="Nationality" required>
<label> <label>
Nationality * Nationality *
</label> </label>
@ -305,7 +308,7 @@
</label> </label>
</div> </div>
<div class="inquiryBtn"> <div class="inquiryBtn">
<input type="submit" value="Start My Journey"> <button id="tmsubmit" href="javascript:;">Start My Journey</button>
</div> </div>
<input type="hidden" name="url" value="<?php echo $orderfrom;?>" /> <input type="hidden" name="url" value="<?php echo $orderfrom;?>" />
<input type="hidden" name="ic_title" value="<?php echo $ic_title;?>" /> <input type="hidden" name="ic_title" value="<?php echo $ic_title;?>" />
@ -372,5 +375,69 @@ $(function(){
$('.destination').html(destinantionstr); $('.destination').html(destinantionstr);
}); });
//表单验证
$('#tmsubmit').click(function(){
var adultnumber = $('input[name="adultnumber"]').val();
var hotel = $('input[name="hotel"]:checked').val();
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var Nationality = $('input[name="Nationality"]').val();
//酒店选择
if(hotel === undefined){
$("body,html").animate({
scrollTop: $('#hotelselect').offset().top - 70
});
$('#hotel_error_msg').removeClass('hidden');
setTimeout(function(){
$('#hotel_error_msg').addClass('hidden');
},5000);
return false;
}
//人数选择
if(adultnumber < 1){
$("body,html").animate({
scrollTop: $('#numberselect').offset().top - 70
});
$('#number_error_msg').removeClass('hidden');
setTimeout(function(){
$('#number_error_msg').addClass('hidden');
},5000);
return false;
}
//姓名验证
if(name == ''){
$('input[name="name"]').focus();
$('#name_error_msg').removeClass('hidden');
setTimeout(function(){
$('#name_error_msg').addClass('hidden');
},5000);
return false;
}
//邮箱验证
if(email == ''){
$('input[name="email"]').focus();
$('#email_error_msg').removeClass('hidden');
setTimeout(function(){
$('#email_error_msg').addClass('hidden');
},5000);
return false;
}
//国籍验证
if(Nationality == ''){
$('input[name="Nationality"]').focus();
$('#nation_error_msg').removeClass('hidden');
setTimeout(function(){
$('#nation_error_msg').addClass('hidden');
},5000);
return false;
}
});
}); });
</script> </script>

@ -175,7 +175,7 @@
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3 id="hotelselect"> <h3 id="hotelselect">
Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please select an option. )</span> Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please select an option.)</span>
</h3> </h3>
<span class="formNote"> <span class="formNote">
Hotels prices in Japan are at least doubled based on the suggested rates Hotels prices in Japan are at least doubled based on the suggested rates
@ -214,7 +214,7 @@
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3 id="numberselect"> <h3 id="numberselect">
Number in your group * <span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> Number in your group * <span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
</h3> </h3>
<div class="peopleSelect"> <div class="peopleSelect">
<span class="formMemo"> <span class="formMemo">
@ -241,7 +241,7 @@
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3 id="dateselect"> <h3 id="dateselect">
Your date of arrival * <span id="date_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> Your date of arrival * <span id="date_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
</h3> </h3>
<input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start" <input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start"
name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off" /> name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off" />
@ -385,14 +385,14 @@
</div> </div>
</form> </form>
</div> </div>
<span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="name" required /> <input type="text" name="name" required />
<label> <label>
Full Name * Full Name *
</label> </label>
</div> </div>
<span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="email" name="email" required /> <input type="email" name="email" required />
<label> <label>
@ -402,7 +402,7 @@
<div class="formMemo"> <div class="formMemo">
All your ticket issues will be sent to your mailbox. All your ticket issues will be sent to your mailbox.
</div> </div>
<span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="Nationality" required /> <input type="text" name="Nationality" required />
<label> <label>
@ -529,7 +529,6 @@ $(function(){
//姓名验证 //姓名验证
if(name == ''){ if(name == ''){
console.log('123');
$('input[name="name"]').focus(); $('input[name="name"]').focus();
$('#name_error_msg').removeClass('hidden'); $('#name_error_msg').removeClass('hidden');
setTimeout(function(){ setTimeout(function(){
@ -540,7 +539,6 @@ $(function(){
//邮箱验证 //邮箱验证
if(email == ''){ if(email == ''){
console.log('123');
$('input[name="email"]').focus(); $('input[name="email"]').focus();
$('#email_error_msg').removeClass('hidden'); $('#email_error_msg').removeClass('hidden');
setTimeout(function(){ setTimeout(function(){
@ -551,7 +549,6 @@ $(function(){
//国籍验证 //国籍验证
if(Nationality == ''){ if(Nationality == ''){
console.log('123');
$('input[name="Nationality"]').focus(); $('input[name="Nationality"]').focus();
$('#nation_error_msg').removeClass('hidden'); $('#nation_error_msg').removeClass('hidden');
setTimeout(function(){ setTimeout(function(){

@ -34,7 +34,7 @@
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3 id="hotelselect"> <h3 id="hotelselect">
Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please select an option. )</span> Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please select an option.)</span>
</h3> </h3>
<span class="formNote"> <span class="formNote">
Hotels prices in Japan are at least doubled based on the suggested rates Hotels prices in Japan are at least doubled based on the suggested rates
@ -78,7 +78,7 @@
<h3 id="numberselect"> <h3 id="numberselect">
Number in your group * Number in your group *
</h3> </h3>
<span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill in this field. )</span> <span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill in this field.)</span>
<div class="peopleSelect"> <div class="peopleSelect">
<span class="formMemo"> <span class="formMemo">
Adults (≥12 years old) Adults (≥12 years old)
@ -102,8 +102,8 @@
</div> </div>
</div> </div>
<div class="selectionBlock"> <div class="selectionBlock">
<h3 id="dateselect"> <h3>
Your date of arrival * <span id="date_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> Your date of arrival *
</h3> </h3>
<input type="date" class="arrivalDate visible-xs" id="Date_Start" name="Date_Start_Mobile" <input type="date" class="arrivalDate visible-xs" id="Date_Start" name="Date_Start_Mobile"
value="<?php echo date('Y-m-d',time() + 24*3600*7)?>" min="<?php echo date('Y-m-d',time() + 24*3600*7)?>" placeholder="mm/dd/yyyy" autocomplete="off" /> value="<?php echo date('Y-m-d',time() + 24*3600*7)?>" min="<?php echo date('Y-m-d',time() + 24*3600*7)?>" placeholder="mm/dd/yyyy" autocomplete="off" />
@ -244,14 +244,14 @@
</label> </label>
</div> </div>
</div> </div>
<span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="name" required> <input type="text" name="name" required>
<label> <label>
Full Name * Full Name *
</label> </label>
</div> </div>
<span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="email" name="email" required> <input type="email" name="email" required>
<label> <label>
@ -261,7 +261,7 @@
<span class="formMemo"> <span class="formMemo">
Your trip advisor will talk with you via email first. Your trip advisor will talk with you via email first.
</span> </span>
<span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field. )</span> <span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please fill out this field.)</span>
<div class="inputTerm"> <div class="inputTerm">
<input type="text" name="Nationality" required> <input type="text" name="Nationality" required>
<label> <label>
@ -360,7 +360,6 @@ $(function(){
var name = $('input[name="name"]').val(); var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val(); var email = $('input[name="email"]').val();
var Nationality = $('input[name="Nationality"]').val(); var Nationality = $('input[name="Nationality"]').val();
var date = $('input[name="Date_Start"]').val();
//目的地选择 //目的地选择
if(destinations === false){ if(destinations === false){
@ -388,7 +387,6 @@ $(function(){
//人数选择 //人数选择
if(adultnumber < 1){ if(adultnumber < 1){
console.log('123');
$("body,html").animate({ $("body,html").animate({
scrollTop: $('#numberselect').offset().top - 70 scrollTop: $('#numberselect').offset().top - 70
}); });
@ -399,21 +397,8 @@ $(function(){
return false; return false;
} }
//时间选择
if(date == ''){
$("body,html").animate({
scrollTop: $('#dateselect').offset().top - 70
});
$('#date_error_msg').removeClass('hidden');
setTimeout(function(){
$('#date_error_msg').addClass('hidden');
},5000);
return false;
}
//姓名验证 //姓名验证
if(name == ''){ if(name == ''){
console.log('123');
$('input[name="name"]').focus(); $('input[name="name"]').focus();
$('#name_error_msg').removeClass('hidden'); $('#name_error_msg').removeClass('hidden');
setTimeout(function(){ setTimeout(function(){
@ -424,7 +409,6 @@ $(function(){
//邮箱验证 //邮箱验证
if(email == ''){ if(email == ''){
console.log('123');
$('input[name="email"]').focus(); $('input[name="email"]').focus();
$('#email_error_msg').removeClass('hidden'); $('#email_error_msg').removeClass('hidden');
setTimeout(function(){ setTimeout(function(){

@ -193,7 +193,7 @@ input[type=checkbox]:checked+label{color: #000}
.chooseothers{font-size: 18px;color: #000;display: block;margin-top: 10px } .chooseothers{font-size: 18px;color: #000;display: block;margin-top: 10px }
.inquiryBtn{display:block;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:24px} .inquiryBtn{display:block;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:24px}
input[type=submit]{background: linear-gradient(#ca3c3b,#ad1818); button{background: linear-gradient(#ca3c3b,#ad1818);
text-align: center; text-align: center;
display: table; display: table;
border-radius: 60px; border-radius: 60px;

Loading…
Cancel
Save