表單點選取消做資料判斷

最近開發遇到一個問題，就是在建立一個表單，有提交和取消兩個按鈕，點選提交自然跳轉到對應的頁面，點選取消則需要根據使用者是否對錶單做了修改進而做相關互動。如果使用者對錶單做了填寫，點選取消，那麼將會提示他確定取消儲存，確定後回退到上一個頁面。如果沒有對錶單有改變，則直接回退到上一個頁面。
需求就是這麼簡單，折磨了我半天啊。
起初我的第一反應就是，找jquery的相關方法，看看有沒有能直接繫結的，然而並沒有。然後在各種前端群問了一番，有的說用onchange也有一些其他的，印象不深了。然後試過之後發現onchange是不能在點選取消的時候直接反饋bool值的。各種嘗試後都沒有用，整個人瘋了。
其實問題本來很簡單，就是點選取消，對比兩次資料是否改變，然後做相關的操作。但是總覺得用源生寫太麻煩了，就沒去想，最後我還是決定用源生來實現。

form表單程式碼

<form action="personalInfo.html">
    <div class="am-u-sm-12 am-u-md-12">
        <ul class="am-u-sm-12 am-u-md-6">
            <li>
                <small>部門：</small><select >
                    <option value="option1">學院辦公室</option
 
>
                    <option value="option2">黨委辦公室</option>
                    <option value="option3">學生工作辦公室（院團委）</option>
                    <option value="option4">合作事務辦公室</option>
                    <option value="option5">留學生管理辦公室</option>
                    <option
 
 value="option6">基礎語言教研室</option>
                  </select>
            </li>
            <li>
                <small>崗位：</small><input type="text" value="崗位" />
            </li>
            <li>
                <small>職務：</small><select>
                    <option value="option1">院長</option>
                    <option value="option2">副院長</option>
                    <option value="option3">主任</option>
                    <option value="option4">副主任</option>
                    <option value="option5">教師</option>
                    <option value="option6">職員</option>
                    <option value="option7">其他</option>
                  </select>
            </li>
            <li>
                <small>職稱：</small><input type="text" value="職稱">
            </li>
            <li>
                <small>性別：</small><select >
                    <option value="option1">男</option>
                    <option value="option2">女</option>
                </select>
            </li>
            <li>
                <small>出生日期：</small><label>
                    <input type="text" placeholder="請選擇" value="2017-01-01">
                </label>
            </li>
            <li><small>身份證號：</small><input type="text" value="420621112"></li>
            <li><small>備註：</small><textarea></textarea></li>
        </ul>
    </div>
    <div class="am-u-sm-12 am-u-md-12">
        <div class="saveBox am-center">
            <button type="submit" class="t-save">保&nbsp;&nbsp;存</button>
            <button type="button" class="t-cancel">取&nbsp;&nbsp;消</button>
        </div>
    </div>
</form>

以上拿來了一些簡單的表單列表，做相關的測試吧。
表單裡面type的型別有：text select textarea。

說說思路

1. 獲取到表單初始的資料
2. 點選取消，再次獲取資料
3. 判斷兩次資料是否有變化

4. 有變化—> 彈出提示； 沒有資料—>直接回退上個頁面

   程式碼實現

    var beforeData = []; //定義一個變數，來接收剛開始的資料
    var afterData = []; //定義一個變數，來接收後來的資料
    var isModified=false;  //定義一個變數，儲存資料是否改變（開關）
    // 獲取初始資料開始
    for (var i=0;i<$("input").length;i++){
        beforeData.push($("input").eq(i).val())
    }
    for (var i=0;i<$("select").length;i++){
        beforeData.push($("select").eq(i).val())
    }
    for (var i=0;i<$("textarea").length;i++){
        beforeData.push($("textarea").eq(i).val())
    }
    // 獲取初始資料結束

    // 當用戶點選了取消button
    $('.t-cancel').click(function (){
        // 獲取變化後的資料開始
        for (var i=0;i<$("input").length;i++){
            afterData.push($("input").eq(i).val())
        }
        for (var i=0;i<$("select").length;i++){
            afterData.push($("select").eq(i).val())
        }
        for (var i=0;i<$("textarea").length;i++){
            afterData.push($("textarea").eq(i).val())
        }
        // 獲取變化後的資料結束

        // 這裡開始比較兩次資料變化
        for (var i=0;i<afterData.length;i++){
            if (afterData[i] != beforeData[i]) {
                // 當有一個數據和之前資料用所不同的時候，就設定isModified為false，並且就可以退出程式了（節約記憶體開銷）
                isModified = true;
                break;
            }
        }
        // 在這來判斷，根據isModified來做相關的處理
        if(isModified){
            var isLeave = window.confirm("資料已經修改，確定要離開？");
            if (isLeave) {
                history.back();
            }
        }else{
            history.back();
        }
    })

以上就是整個的程式碼實現，寫出來發現用了不到十分鐘。功能都是ok的