2013年9月4日 星期三

jquery表單範例

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
title>jquery表單範例</title>
<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; }
.style18 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #CC0000; font-weight: bold; }
    .style19
    {
        width: 748px;
    }
-->
</style>
<script type="text/JavaScript">
<!--
    function MM_swapImgRestore() { //v3.0
        var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
    }

    function MM_preloadImages() { //v3.0
        var d = document; if (d.images) {
            if (!d.MM_p) d.MM_p = new Array();
            var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
                if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
        }
    }

    function MM_findObj(n, d) { //v4.01
        var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
            d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p);
        }
        if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
        for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
        if (!x && d.getElementById) x = d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
        var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3)
            if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; }
    }
//-->
</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="Js/My97DatePicker/WdatePicker.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() {
            //alert($("#Field input:radio:checked[id='Sex']").val());
        });

        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) + " &nbsp;&nbsp;&nbsp;");
                $("#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.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;
            }
            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 == "") {
//                        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 onload="MM_preloadImages('images/header_m2a.gif','images/header_m3a.gif','images/header_m4a.gif','images/header_m5a.gif','images/header_m6a.gif','images/header_m7a.gif')">
<form id="Form1" runat="server" onsubmit="return CheckForm(this);">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td height="196" valign="top" background="images/header.jpg">
      <table width="99%" border="0" cellspacing="0" cellpadding="8">
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="100" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/header_m1.gif" width="75" height="44" /></td>
          <td><a href="http://www.ftstour.com.tw/b2c/NTUEMBA/2012SHA/course.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/header_m2a.gif',1)"><img src="images/header_m2.gif" name="Image3" width="149" height="44" border="0" id="Image3" /></a></td>
          <td><a href="http://vip.ftstour.com.tw/b2c/NTUEMBA/2012SHA/EMBA101/Login.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/header_m3a.gif',1)"><img src="images/header_m3.gif" name="Image4" width="164" height="44" border="0" id="Image4" /></a></td>
          <td><a href="http://www.ftstour.com.tw/b2c/NTUEMBA/2012SHA/contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/header_m4a.gif',1)"><img src="images/header_m4.gif" name="Image5" width="134" height="44" border="0" id="Image5" /></a></td>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/header_m5a.gif',1)"><img src="images/header_m5.gif" name="Image6" width="149" height="44" border="0" id="Image6" /></a></td>
          <td><a href="http://www.ftstour.com.tw/b2c/NTUEMBA/2012SHA/ntucredit.doc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/header_m6a.gif',1)"><img src="images/header_m6.gif" name="Image7" width="119" height="44" border="0" id="Image7" /></a></td>
          <td><a href="http://www.ftstour.com.tw/b2c/NTUEMBA/2012SHA/index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/header_m7a.gif',1)"><img src="images/header_m7.gif" name="Image8" width="95" height="44" border="0" id="Image8" /></a></td>
          <td><img src="images/header_m8.gif" width="75" height="44" /></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td><p align="center"><img src="images/list_v1.gif" width="904" height="35" /></p>
      <table width="860" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td height="34" bgcolor="#F0F0F0"><span class="style6"><a href="http://www.ftstour.com.tw/b2c/NTUEMBA/2012SHA/index.htm" class="style6">大陸金融首頁</a> / 旅遊服務登記系統</span></td>
        </tr>
      </table>
      <br />
      <table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="images/tb_bg1.gif" width="877" height="45" /></td>
        </tr>
        <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')">
                        <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')">
                        <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">
                  <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')" />
                        依照活動時間前往 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')" />
                        需客製化旅行日期
                        ,去程日期
                        <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')" />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="40">
                  <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')">
                            <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>(含稅)  經濟艙(K):<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>(含稅)  經濟艙(K):<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" class="style9"><font color="blue">
(4)東方航空公司 (MU) / 經濟艙:<span class="style6">15000</span>(含稅) </font><br />
  1 MU5098  27MAY   TSASHA   起飛1715  到達1915 (松山/虹橋)<br />
  2 MU5097  02JUN   SHATSA   起飛1415  到達1615 (虹橋/松山)
                          <br />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step3. 自費行程</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="110" class="style9">
                  <table width="737" border="0" align="center" cellpadding="3" cellspacing="0">
                    <tr>
                      <td width="731" class="style6">
                        *以下報價不含導遊小費每人每日NT$100元,行程皆滿16人以上成行。
                        <br />
                        <br />
                      </td>
                    </tr>
                    <tr>
                      <td width="731">
                        <input class="step3" disabled="disabled" type="checkbox" id="Expense1" name="Expense1" value="1" />
                        5/30 (三)~5/31(四)蘇州+杭州二日遊(含住宿),<span class="style6">6900/每人</span>
                        <br /> 旅客人數:
                        大人
                        <select class="step3" disabled="disabled" id="Expense1_Adult" name="Expense1_Adult">
                            <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 class="step3" disabled="disabled" id="Expense1_Child" name="Expense1_Child">
                            <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> 人;
                          <br />
                          <br />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input class="step3" disabled="disabled" type="checkbox" id="Expense2" name="Expense2" value="2" />
                        5/30 (三)上海一日遊,<span class="style6">3700/每人</span>
                        <br /> 旅客人數:
                        大人
                        <select class="step3" disabled="disabled" id="Expense2_Adult" name="Expense2_Adult">
                            <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 class="step3" disabled="disabled" id="Expense2_Child" name="Expense2_Child">
                            <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> 人;
                          <br />
                          <br />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input class="step3" disabled="disabled" type="checkbox" id="Expense3" name="Expense3" value="3" />
                        5/31 (四)上海一日遊,<span class="style6">3300/每人</span>
                        <br /> 旅客人數:
                        大人
                        <select class="step3" disabled="disabled" id="Expense3_Adult" name="Expense3_Adult">
                            <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 class="step3" disabled="disabled" id="Expense3_Child" name="Expense3_Child">
                            <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> 人;
                          <br />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step4. 選擇房型與入住日期</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="110">
                  <table border="0" align="center" cellpadding="3" cellspacing="0" class="style19">
                    <tr>
                      <td width="731" class="style9">
                        是否需要代訂飯店:
                        <input class="step4" disabled="disabled" name="Hotel" value="是" type="radio" onclick="Show('.','Y','step4_1');Show('#','Y','step4_2');Show('.','N','step5')" />  
                        是
                        <input class="step4" disabled="disabled" name="Hotel" value="否" type="radio" onclick="Show('.','Y','step5');Show('.','N','step4_1');Show('#','N','step4_2')" />    
                        否
                      </td>
                    </tr>
                  </table>
                  <table width="730" border="0" align="center" cellpadding="3" cellspacing="0">
                    <tr>
                      <td class="style9">
                        房型:
                        <input class="step4_1" disabled="disabled" id="Room1" name="Room1" value="Y" type="checkbox" onclick="Show('.','Y','Room1_Amount')" />
                        單人房
                        <input class="step4_1" disabled="disabled" id="Room1_Amount" name="Room1_Amount" type="text" onchange="CheckNumber(this)" size="2" maxlength="2" />
                        間;
                        <input class="step4_1" disabled="disabled" id="Room2" name="Room2" value="Y" type="checkbox" onclick="Show('.','Y','Room2_Amount')" />
                        雙人房
                        <input class="step4_1" disabled="disabled" id="Room2_Amount" name="Room2_Amount" type="text" onchange="CheckNumber(this)" onkeyup="AddRoom()" size="2" maxlength="2" />                
                        間
                      </td>
                    </tr>
                    <tr>
                      <td width="731" class="style9">
                        <table id="Room_Partner_Table" width="100%" border="0" align="center" cellpadding="3" cellspacing="0"></table>
                        <table id="Room_Partner_Template" style="display:none;" width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
                          <tr id="Room_Partner_Tr">
                            <td width="40%" id="Room_Title" align="right" class="style9">
                              雙人房
                            </td>
                            <td width="30%" class="style9">
                              同房旅客姓名:<input name="Room_Partner" type="text" size="10" value="房1_" />
                            </td>
                            <td width="30%" class="style9">
                              同房旅客姓名:<input name="Room_Partner" type="text" size="10" value="房1_" />
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td width="731" class="style9">
                        是否需加購每晚<span class="style6">NT$250 X 入住天數</span>,房間寬帶:
                        <input class="step4_1" disabled="disabled" name="Room_Net" type="radio" value="是" onclick="Show('.','Y','step5')" />  
                        是
                        <input class="step4_1" disabled="disabled" name="Room_Net" type="radio" value="否" onclick="Show('.','Y','step5')" />    
                        否
                       
                          <br />
                        <br />
                        <div style="color: #6666DD">(如不需每日皆購買的學長姐,可於入住時進行單一天數當地自費開通房間寬帶,一晚RMB80;復旦大學有提供免費但不是很穩定的Wi-Fi Service)<br />
                          </div>
                      </td>
                    </tr>
                    <tr>
                      <td height="80" class="style9">
                        入住日期:
                        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#8A8A8A">
                          <tr>
                            <td bgcolor="#E3E3E3" class="style13" align="center">5/27(日)</td>
                            <td bgcolor="#E3E3E3" class="style13" align="center">5/28(一)</td>
                            <td bgcolor="#E3E3E3" class="style13" align="center">5/29(二)</td>
                            <td bgcolor="#E3E3E3" class="style13" align="center">5/30(三)</td>
                            <td bgcolor="#E3E3E3" class="style13" align="center">5/31(四)</td>
                            <td bgcolor="#E3E3E3" class="style13" align="center">6/1(五)</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="5/27" type="checkbox" checked="checked" />
                            </td>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="5/28" type="checkbox" checked="checked" />
                            </td>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="5/29" type="checkbox" checked="checked" />
                            </td>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="5/30" type="checkbox" checked="checked" />
                            </td>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="5/31" type="checkbox" checked="checked" />
                            </td>
                            <td bgcolor="#FFFFFF" align="center">
                              <input class="step4_1" disabled="disabled" name="Room_Date" value="6/1" type="checkbox" checked="checked" />
                            </td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$6400</td>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$4000</td>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$4000</td>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$4000</td>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$4000</td>
                            <td bgcolor="#FFFFFF" class="style6" align="center">NT$4000</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td height="120" class="style9">
                          <br />
                        其他需求:
                        <center>
                        <textarea id="step4_2" disabled="disabled" name="Room_Other" cols="145" rows="5" class="style13"></textarea>
                        </center>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step5. 簽證服務</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="40">
                  <table width="737" border="0" align="center" cellpadding="3" cellspacing="0">
                    <tr>
                      <td width="731" class="style9">
                          <span>是否需要辦理護照:
                          <input class="step5" disabled="disabled" name="Passport" value="是" type="radio" onclick="Show('.','Y','step5_1')" />
                          是
                          <input class="step5" disabled="disabled" name="Passport" value="否" type="radio" onclick="Show('.','Y','step5_1')" />
                          否
                        </span>
                        <span>    
                          是否需要辦理/加簽台胞證:
                          <input class="step5_1" disabled="disabled" name="MTPs" value="是" type="radio" onclick="Show('#','Y','step6,step7')" />
                          是
                          <input class="step5_1" disabled="disabled" name="MTPs" value="否" type="radio" onclick="Show('#','Y','step6,step7')" />
                          否
                        </span>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step6. 其他需求</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="110" align="center">
                  <textarea id="step6" disabled="disabled" name="Memo" cols="145" rows="5" class="style13"></textarea>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step7. 填寫旅客資料</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="60" valign="top">
                  <div id="step7" disabled="disabled">
                    <table id="Title" width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#8A8A8A"></table>
                    <table id="Template" style="display:none;" width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#8A8A8A">
                      <tr id="Head" height="25" bgcolor="#E3E3E3" class="style13" align="center">
                        <td width="10%">&nbsp;</td>
                        <td width="18%">中文姓名</td>
                        <td width="20%">護照英文姓名</td>
                        <td width="10%">性別</td>
                        <td width="18%">身分證字號</td>
                        <td width="14%">出生年/ 月 / 日</td>
                        <td width="10%">餐食需求</td>
                      </tr>
                      <tr id="Field" height="25" bgcolor="#FFFFFF" class="style13" align="center">
                        <td id="Traveler" class="style13">旅客</td>
                        <td><input name="Chinese_Name" type="text" size="15" class="style13" /></td>
                        <td><input name="English_Name" type="text" size="20" class="style13" /></td>
                        <td>
                          <input name="Sex" type="radio" value="男" class="style13" /> 男
                          <input name="Sex" type="radio" value="女" class="style13" /> 女
                        </td>
                        <td><input name="ID" type="text" size="16" maxlength="10" class="style13" /></td>
                        <td><input name="Birthday" class="Wdate" onclick="WdatePicker();Show('.','Y','step8')" type="text" size="12" /></td>
                        <td><input name="Vegetarian_Food" value="素" type="checkbox" class="style13" /> 素食</td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
              <tr>
                <td height="40" valign="bottom" class="style7"> Step8. 代收轉付收據格式</td>
              </tr>
              <tr>
                <td><img src="images/line.gif" width="829" height="5" /></td>
              </tr>
              <tr>
                <td height="40">
                  <table border="0" align="center" cellpadding="3" cellspacing="0">
                    <tr>
                      <td width="737" colspan="2" class="style9">是否須抬頭:
                        <input class="step8" disabled="disabled" name="Invoice" type="radio" value="是" onclick="Show('.','Y','step8_1')" />  
                        是
                        <input class="step8" disabled="disabled" name="Invoice" type="radio" value="否" onclick="Show('.','N','step8_1')" />    
                        否
                      </td>
                    </tr>
                    <tr>
                      <td width="367" valign="top" class="style9">
                        公司名稱:
                        <input class="step8_1" disabled="disabled" name="Company" type="text" size="30" />
                      </td>
                      <td width="367" valign="top" class="style9">
                        統一編號:
                        <input class="step8_1" disabled="disabled" name="Unity_Number" type="text" size="30" />                
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <center>
              <p>
                <img src="images/tb_line.gif" width="829" height="14" />
                <br />
                <br />
                <input type="submit" name="Submit" value="確定送出" />
              </p>
            </center>
          </td>
        </tr>
        <tr>
          <td><img src="images/tb_bg3.jpg" width="877" height="30" /></td>
        </tr>
      </table>
      <br />
    </td>
  </tr>
  <tr>
    <td><img src="images/down.jpg" width="960" height="55" /></td>
  </tr>
</table>
</form>
</body>
</html>

沒有留言:

張貼留言