jquery表單範例

2012080609:16

<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) + "　&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.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

上一篇

[轉貼] jQuery對select tag的操作

下一篇

C# SqlTransaction 交易作業 (完成交易或復原異動)

相關文章

我要留言