用jQuery做表單的預覽

用jQuery做表單的預覽

一個月以前,有個專案需要在表單送出之前先預覽一下,當時的我不懂jQuery

只好多建一個View,然後把要Post回去的資料用<input type=”hidden”>藏起來,

實在很費工,但是現在認識了jQuery,也會寫一些簡單的Code,所以今天就來把

一個月以前不會的事情做到。

今天參考的是JavaScript & jQuery 的應用(四):簡單預覽功能實作

首先先建一些基本的表單出來,有text,select,radio,checkbox

    <div>
        <label for="firstname">姓氏:</label>
        <input type="text" name="FamilyName" id="firstname" maxlength="20" tabindex="1" autocomplete="off" value="">
    </div>
    <br />
    <div>
        <label for="secondname">名字:</label>
        <input type="text" name="GivenName" id="secondname" maxlength="20" tabindex="2" autocomplete="off" value="">
    </div>
    <br />
    <div>
        <label for="man">性別:</label>
        <input tabindex="6" name="Gender" id="man" type="radio" value="M" checked>
        <label for="man">男</label>
        <input tabindex="6" name="Gender" id="female" type="radio" value="F">
        <label for="female">女</label>
    </div>
    <br />
    <div>
        <label for="byear">生日:</label>
        <select tabindex="8" name="year" id="year">
            <option value='0' selected>年分</option>
            <option value='1985'>1985</option>
            <option value='1986'>1986</option>
            <option value='1987'>1987</option>
            <option value='1988'>1988</option>
            <option value='1989'>1989</option>
            <option value='1990'>1990</option>
            <option value='1991'>1991</option>
            <option value='1992'>1992</option>
            <option value='1993'>1993</option>
            <option value='1994'>1994</option>
            <option value='1995'>1995</option>
            <option value='1996'>1996</option>
        </select>
        <label for="年">年</label>
        <select tabindex="8" name="bmon" id="bmon">
            <option value='0' selected>月份</option>
            <option value='1'>01</option>
            <option value='2'>02</option>
            <option value='3'>03</option>
            <option value='4'>04</option>
            <option value='5'>05</option>
            <option value='6'>06</option>
            <option value='7'>07</option>
            <option value='8'>08</option>
            <option value='9'>09</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
        </select>
         <label for="月">月</label>
        <select tabindex="9" name="bday" id="bday">
            <option value='0' selected>日期</option>
            <option value='1'>01</option>
            <option value='2'>02</option>
            <option value='3'>03</option>
            <option value='4'>04</option>
            <option value='5'>05</option>
            <option value='6'>06</option>
            <option value='7'>07</option>
            <option value='8'>08</option>
            <option value='9'>09</option>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
            <option value='13'>13</option>
            <option value='14'>14</option>
            <option value='15'>15</option>
            <option value='16'>16</option>
            <option value='17'>17</option>
            <option value='18'>18</option>
            <option value='19'>19</option>
            <option value='20'>20</option>
            <option value='21'>21</option>
            <option value='22'>22</option>
            <option value='23'>23</option>
            <option value='24'>24</option>
            <option value='25'>25</option>
            <option value='26'>26</option>
            <option value='27'>27</option>
            <option value='28'>28</option>
            <option value='29'>29</option>
            <option value='30'>30</option>
            <option value='31'>31</option>
        </select>
        <label for="日">日</label>
    </div>
    <br />
    <div>
            <label for='興趣'>興趣</label>
            <input name='gai' type='checkbox' id='gai0' checked><label for='打球'>打球</label>
            <input name='gi' type='checkbox' id='gi1' checked><label for='寫Code'>寫Code</label>
            <input name='gsm' type='checkbox' id='gsm2' checked><label for='看電影'>看電影</label>
    </div>
    <br />
    <div>
        <input id="preview" type="button" value="預覽" /><input id="ok" type="button" value="取消" /><input id="sumit" type="submit" value="送出" />
    </div>

由於今天的重點是jQuery,所以上面是純Html

6854897368c74f10818b884f9a11874e

接著開始寫jQuery,利用jQuery的選擇器就可以將同一類型的表單一網打盡。

         <script type="text/javascript">
             $(function () {                                //頁面ready的時候
                 $("#preview").show().click(previewClick);  //將預覽按鈕顯示,註冊previewClick事件
                 $("#cancel").hide().click(cancelClick);    //將取消按鈕隱藏,註冊cancelClick事件
                 $("#sumit").hide();                        //將送出按鈕隱藏
             });

             function previewClick() {          //當點選預覽時觸發這個function
                 $("#preview").hide();          //預覽按鈕隱藏
                 $("#cancel").show();           //取消按鈕顯示
                 $("#sumit").show();            //送出按鈕顯示

                 $("input:text").hide().each(function () {   //所有<input type="text">隱藏
                                                             //標籤之後加上輸入的value
                     $(this).after("<span id='show'>" + this.value + "</span>");
                 });

                 $("select").hide().each(function () {       //所有<select>隱藏
                                                             //標籤之後加上選取的text
                     $(this).after("<span id='show'>" + this[this.selectedIndex].text + "</span>");
                 });

                 $("input:radio").each(function () {         //所有<input type="radio">隱藏
                                                             //沒選到的後面一個label隱藏
                     $(this).hide();
                     if (!this.checked) {
                         $(this).next("label").hide();
                     }

                 $("input:checkbox").each(function () {       //所有<input type="checkbox">隱藏
                                                              //沒選到的後面一個label隱藏
                     $(this).hide();
                         if (!this.checked) {
                             $(this).next("label").hide();
                         }
                     });
                 });
             }

             function cancelClick() {                        //點選取消按鈕時觸發
                 $("#preview").show();                       //顯示預覽按鈕
                 $("#cancel").hide();                        //隱藏取消按妞
                 $("#sumit").hide();                         //隱藏送出按鈕

                 $("span#show").prev().show().end().remove(); 
                 //前一個function加入的表單value標籤,都有加一個<span id="show"></span>
                 //因此用$("span#show")選取所有標籤為span id為show的元素,然後把他的前一個
                 //同輩元素顯示,end()表示返回$("span#show")這個元素,然後移除掉。
                 
                 $("input:text").show();                     //所有<input type="text">顯示

                 $("input:radio").each(function () {         //所有<input type="radio">顯示
                     $(this).show();
                     $(this).next("label").show();           //將後面的label顯示
                 });

                 $("select").show();                          //所有<select>顯示

                 $("input:checkbox").each(function () {      //所有<input type="checkbox">顯示
                     $(this).show();
                     $(this).next("label").show();           //將後面的label顯示
                 });
             }
         </script>

 

在這個範例中,第45行如果寫成 $("span#show").remove();

或是第50行和第57行註解掉,效果是完全一樣的。因為兩者的效果有重疊到。

完成之後的效果:

5fc0bcb72e30413eaf0cc5b9fab656b6

現在我jQuery還在入門階段,所以寫出來的Code很多累贅的地方,

而且沒什麼創意可言,希望以後能多寫多進步。