<html>
<title>jquery表單範例</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #4073AA;
}
.style6 {
text-decoration: none;
color: #CC0000;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
a.style6:hover {
text-decoration: none;
font-size: 16px;
color:#6600FF;
font-family: Arial, Helvetica, sans-serif;
}
.style7 {
font-size: 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #0000FF;
}
.style9 {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
.style13 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333333; }
.style19
{
width: 748px;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.my97.net/dp/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/block/jquery.blockUI.js"></script>
<script type="text/javascript">
//讓網頁中非Submit按鈕觸發Enter鍵時變成Tab的行為
$("input").not($(":button")).keypress(function(evt) {
if (evt.keyCode == 13) {
if ($(this).attr("type") !== 'submit') {
var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
var index = fields.index(this);
if (index > -1 && (index + 1) < fields.length) {
fields.eq(index + 1).focus();
}
$(this).blur();
return false;
}
}
});
var people = 0;
$(document).ready(function() {
$.blockUI.defaults.overlayCSS.opacity = .1;
$('div.q2a').block({ message: null });
$('div.q2b').block({ message: null });
$('div.q3').block({ message: null });
$('div.q4a').block({ message: null });
$('div.q4b').block({ message: null });
$('div.q5').block({ message: null });
$('div.q6').block({ message: null });
$('div.q7').block({ message: null });
$('div.q8').block({ message: null });
});
function Show(mode, type, names) {
arrName = names.split(',');
for (var i = 0; i < arrName.length; i++) {
if (type == "N")
$(mode + arrName[i]).attr("disabled", "disabled");
else if (type == "Y")
$(mode + arrName[i]).removeAttr("disabled");
}
}
function RemoveOption(obj) {
//移除「--請選擇--」選項
$("#" + obj.id + ">option:contains('--請選擇--')").remove();
}
function CheckNumber(obj) {
if (isNaN(obj.value)) {
alert("房間數量只可填入數字!!");
obj.value = 1;
}
if (obj.value.length == 0) {
alert("房間數量不得空白!!");
obj.value = 1;
}
}
function AddRoom() {
//增加同房旅客姓名欄位
var Room2_Amount = ($("#Room2_Amount").val().length == 0) ? 0 : $("#Room2_Amount").val();
var total = parseInt(Room2_Amount);
$("#Room_Partner_Table tr").remove();
for (var i = 0; i < total; i++) {
$("#Room_Partner_Tr").clone().attr("id", "Room_Partner_Tr" + i).appendTo("#Room_Partner_Table");
$("#Room_Partner_Tr" + i + " #Room_Title").html("雙人房" + (i + 1) + " ");
$("#Room_Partner_Tr" + i + " input[name='Room_Partner']").attr("value", "房" + (i + 1) + "_");
}
}
function AddField() {
$("#Title tr").remove();
people = parseInt($("#Partner_Adult").val()) + parseInt($("#Partner_Child").val());
$("#Head").clone().attr("id", "Head").appendTo("#Title");
for (var i = 0; i < people; i++) {
$("#Field").clone().attr("id", "Field" + i).appendTo("#Title");
if (i == 0) {
$("#Field" + i + " #Traveler").html("旅客1<span class='style18'>(*)</span>");
} else {
$("#Field" + i + " #Traveler").html("旅客" + (i + 1));
}
// $("#Field" + i + " input[id='Chinese_Name']").attr("id", "Chinese_Name" + i).attr("name", "Chinese_Name" + i);
// $("#Field" + i + " input[id='English_Name']").attr("id", "English_Name" + i).attr("name", "English_Name" + i);
$("#Field" + i + " input:radio[name='Sex']").attr("name", "Sex" + i);
// $("#Field" + i + " input[id='ID']").attr("id", "ID" + i).attr("name", "ID" + i);
// $("#Field" + i + " input[id='Birthday']").attr("id", "Birthday" + i).attr("name", "Birthday" + i);
$("#Field" + i + " input[name='Vegetarian_Food']").attr("name", "Vegetarian_Food" + i);
}
}
function CheckForm(obj) {
var total = parseInt($("#Partner_Adult").val()) + parseInt($("#Partner_Child").val());
if (total == 0) { //Step1
alert("請選擇旅遊人數!!!");
obj.Partner_Adult.focus();
return false;
}
if (!obj.Plane[0].checked && !obj.Plane[1].checked) { //Step2
alert("請選擇班機!!!");
obj.Plane[0].focus();
return false;
}
if (obj.Plane[0].checked) { //Step2_1
if (obj.Plane_Sort1.value == "" || obj.Plane_Sort2.value == "" || obj.Plane_Sort3.value == "" || obj.Plane_Sort4.value == "") {
alert("請選擇航班順序!!!");
obj.Plane_Sort1.focus();
return false;
}
var total = parseInt($("#Plane_Sort1").val()) + parseInt($("#Plane_Sort2").val()) + parseInt($("#Plane_Sort3").val()) + parseInt($("#Plane_Sort4").val());
if (total != 10) {
alert("航班順序請勿重覆!!!");
obj.Plane_Sort1.focus();
return false;
}
} else { //Step2_2
if (obj.godate.value == "") {
alert("請選擇去程日期!!!");
obj.godate.focus();
return false;
}
if (obj.backdate.value == "") {
alert("請選擇回程日期!!!");
obj.backdate.focus();
return false;
}
}
if (obj.Expense1.checked) { //Step3_1
var total = parseInt($("#Expense1_Adult").val()) + parseInt($("#Expense1_Child").val());
if (total == 0) {
alert("請選擇自費行程1的旅客人數!!!");
obj.Expense1_Adult.focus();
return false;
}
if (!obj.Single_Room[0].checked && !obj.Single_Room[1].checked) {
alert("請選擇是否加價NT1000升等單人房!!!");
obj.Single_Room[0].focus();
return false;
}
if (obj.Single_Room[1].checked && obj.Single_RoomAmount.value == "") {
alert("單人房數量請勿空白!!!");
obj.Single_RoomAmount.focus();
return false;
}
}
if (obj.Expense2.checked) { //Step3_2
var total = parseInt($("#Expense2_Adult").val()) + parseInt($("#Expense2_Child").val());
if (total == 0) {
alert("請選擇自費行程2的旅客人數!!!");
obj.Expense2_Adult.focus();
return false;
}
}
if (obj.Expense3.checked) { //Step3_3
var total = parseInt($("#Expense3_Adult").val()) + parseInt($("#Expense3_Child").val());
if (total == 0) {
alert("請選擇自費行程3的旅客人數!!!");
obj.Expense3_Adult.focus();
return false;
}
}
if (!obj.Hotel[0].checked && !obj.Hotel[1].checked) { //Step4
alert("請選擇是否需要代訂飯店!!!");
obj.Hotel[0].focus();
return false;
}
if (obj.Hotel[0].checked) { //Step4_1
if (!obj.Room1.checked && !obj.Room2.checked) {
alert("請選擇房型!!!");
obj.Room1.focus();
return false;
}
if (obj.Room1.checked && obj.Room1_Amount.value == "") {
alert("單人房數量請勿空白!!!");
obj.Room1_Amount.focus();
return false;
}
if (obj.Room2.checked && obj.Room2_Amount.value == "") {
alert("雙人房數量請勿空白!!!");
obj.Room2_Amount.focus();
return false;
}
var Room1_Amount = ($("#Room1_Amount").val().length == 0) ? 0 : $("#Room1_Amount").val();
var Room2_Amount = ($("#Room2_Amount").val().length == 0) ? 0 : $("#Room2_Amount").val();
var total = parseInt(Room1_Amount) + parseInt(Room2_Amount);
if (total <= 0) {
alert("房間數量至少要一間!!!");
obj.Room1_Amount.focus();
return false;
}
if (!obj.Room_Net[0].checked && !obj.Room_Net[1].checked) {
alert("請選擇是否需加購每晚RMB50房間寬帶!!!");
obj.Room_Net[0].focus();
return false;
}
if (!obj.Room_Date[0].checked && !obj.Room_Date[1].checked && !obj.Room_Date[2].checked && !obj.Room_Date[3].checked && !obj.Room_Date[4].checked && !obj.Room_Date[5].checked) {
alert("入住日期至少要選一天!!!");
obj.Room_Date[0].focus();
return false;
}
}
if (!obj.Passport[0].checked && !obj.Passport[1].checked) { //Step5
alert("請選擇是否需要辦理護照!!!");
obj.Passport[0].focus();
return false;
}
if (!obj.MTPs[0].checked && !obj.MTPs[1].checked) { //Step5
alert("請選擇是否需要辦理/加簽台胞證!!!");
obj.MTPs[0].focus();
return false;
}
//第一筆強制要填
if (obj.Chinese_Name[0].value == "") { //Step7
alert("請填寫中文姓名!!!");
obj.Chinese_Name[0].focus();
return false;
}
if (obj.English_Name[0].value == "") { //Step7
alert("請填寫護照英文姓名!!!");
obj.English_Name[0].focus();
return false;
} else {
if (obj.English_Name[0].value.indexOf(",") != -1) {
obj.English_Name[0].value = obj.English_Name[0].value.replace(/\,/g, ' '); //去除欄位中的『,』
}
}
if (!obj.Sex0[0].checked && !obj.Sex0[1].checked) { //Step7
alert("請選擇性別!!!");
obj.Sex0[0].focus();
return false;
}
if (obj.ID[0].value == "") { //Step7
alert("請填寫身分證字號!!!");
obj.ID[0].focus();
return false;
}
if (obj.Birthday[0].value == "") { //Step7
alert("請填寫出生年月日!!!");
obj.Birthday[0].focus();
return false;
}
//第二筆以後的有填中文姓名才做判斷
for (var i = 1; i < people; i++) { //Step7
if (obj.Chinese_Name[i].value != "") {
if (obj.English_Name[i].value.indexOf(",") != -1) {
obj.English_Name[i].value = obj.English_Name[i].value.replace(/\,/g, ' '); //去除欄位中的『,』
}
// if (obj.English_Name[i].value == "") {
// alert("請填寫護照英文姓名!!!");
// obj.English_Name[i].focus();
// return false;
// }
// var oo = $("#Field" + i + " input:radio[id='Sex" + i + "']");
// if (!oo[0].checked && !oo[1].checked) {
// alert("請選擇性別!!!");
// oo[0].focus();
// return false;
// }
// if (obj.ID[i].value == "") {
// alert("請填寫身分證字號!!!");
// obj.ID[i].focus();
// return false;
// }
// if (obj.Birthday[i].value == "") {
// alert("請填寫出生年月日!!!");
// obj.Birthday[i].focus();
// return false;
// }
}
}
if (!obj.Invoice[0].checked && !obj.Invoice[1].checked) { //Step8
alert("請選擇是否須抬頭!!!");
obj.Invoice[0].focus();
return false;
}
if (obj.Invoice[0].checked) { //Step8_1
if (obj.Company.value == "") {
alert("請填寫公司名稱!!!");
obj.Company.focus();
return false;
}
if (obj.Unity_Number.value == "") { //Step8_1
alert("請填寫統一編號!!!");
obj.Unity_Number.focus();
return false;
}
}
$("#Room_Partner_Template").remove();
$("#Template").remove();
return true;
}
</script>
</head>
<body>
<form id="Form1" runat="server" onsubmit="return CheckForm(this);">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td background="images/tb_bg2.jpg"><br />
<table width="500" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><span class="style7"> Step1. 選擇旅遊人數</span></td>
</tr>
<tr>
<td><img src="images/line.gif" width="829" height="5" /></td>
</tr>
<tr>
<td height="40">
<span class="style9"> 旅客人數：
大人
<select id="Partner_Adult" name="Partner_Adult" onchange="RemoveOption(this);AddField();Show('.','Y','step2');$('div.q2a').unblock();">
<option value="0">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> 人；
兒童
<select id="Partner_Child" name="Partner_Child" onchange="RemoveOption(this);AddField();Show('.','Y','step2');$('div.q2a').unblock();">
<option value="0">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> 人；
</span>
</td>
</tr>
<tr>
<td height="40" valign="bottom" class="style7"> Step2. 選擇班機</td>
</tr>
<tr>
<td><img src="images/line.gif" width="829" height="5" /></td>
</tr>
<tr>
<td height="40"><div class="q2a">
<table width="737" border="0" align="center" cellpadding="3" cellspacing="0" >
<tr>
<td width="731" height="60" class="style6">*機位訂位規則為依照(1)學員填表順序與(2)個人理想順序(3)從低價艙等開始訂位，低價艙等額滿才往高價艙等訂(同樣是經濟艙,不同票價結構),因此請學長姐們儘早填寫，方便我們幫您搶訂低價艙等之機位。</td>
</tr>
<tr>
<td width="731" height="40">
<input class="step2" disabled="disabled" name="Plane" type="radio" value="1" onclick="Show('.','Y','step2_1a');Show('#','N','step2_2a,step2_2b');$('div.q2b').unblock();" />
依照活動時間前往 5/27 ~ 6/2<br />
<input class="step2" disabled="disabled" name="Plane" type="radio" value="2" onclick="Show('#','Y','step2_2a');Show('.','N','step2_1a,step2_1b,step2_1c,step2_1d');$('div.q2b').block({ message: null });" />
需客製化旅行日期
，去程日期
<input id="step2_2a" disabled="disabled" name="godate" type="text" class="Wdate" onclick="WdatePicker();Show('#','Y','step2_2b')" />
，回程日期
<input id="step2_2b" disabled="disabled" name="backdate" type="text" class="Wdate" onclick="WdatePicker();Show('.','Y','step3,step4');$('div.q3').unblock();$('div.q4a').unblock();" />
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="40">
<div class="q2b">
<table width="737" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td width="731">
<p>請照心目中理想之航班順序填寫 1,2,3,4</p>
<select class="step2_1a" disabled="disabled" id="Plane_Sort1" name="Plane_Sort1" onchange="Show('.','Y','step2_1b')">
<option value="">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="step2_1b" disabled="disabled" id="Plane_Sort2" name="Plane_Sort2" onchange="Show('.','Y','step2_1c')">
<option value="">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="step2_1c" disabled="disabled" id="Plane_Sort3" name="Plane_Sort3" onchange="Show('.','Y','step2_1d')">
<option value="">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="step2_1d" disabled="disabled" id="Plane_Sort4" name="Plane_Sort4" onchange="Show('.','Y','step3,step4');$('div.q3').unblock();$('div.q4a').unblock();">
<option value="">--請選擇--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td width="731" class="style9"><br /><font color="blue">(1)中華航空公司 ( CI) / 經濟艙:<span class="style6">12500</span>(含機場稅)</font><br />
1 CI 201 27MAY TSASHA 起飛1230 到達1415 (松山/虹橋)<br />
2 CI 202 2JUN SHATSA 起飛1615到達1815(虹橋/松山)
<br />
</td>
</tr>
<tr>
<td width="731" class="style9"><font color="blue">
(2)長榮航空公司 (BR) / 經濟艙(X):<span class="style6">13300</span>(含稅) 經濟艙(B):<span class="style6">15500</span>(含稅) 經濟艙(T):<span class="style6">16400</span>(含稅)</font><br />
1 BR 772 27MAY TSASHA 起飛1430 到達1555 (松山/虹橋)<br />
2 BR 771 02JUN SHATSA 起飛1950 到達2145 (虹橋/松山)
<br />
</td>
</tr>
<tr>
<td width="731" class="style9"><font color="blue">
(3)長榮航空公司 (BR) / 經濟艙(X):<span class="style6">13300</span>(含稅) 經濟艙(B):<span class="style6">15500</span>(含稅) 經濟艙(T):<span class="style6">16400</span>(含稅)</font><br />
1 BR 702 27MAY TPEPVG 起飛1010 到達1205 (桃園/浦東)<br />
2 BR 711 02JUN PVGTPE 起飛1315 到達1510 (浦東/桃園)
<br />
</td>
</tr>
<tr>
<td width="731&qu
