• [转]javascript 判断某页面上的表单数据是否改变过


    本文转自:http://info.codepub.com/2008/09/info-22582.html

    原文如下:

    使用场合:当某个页面数据修改时,需要执行某些操作时   
    在页面的body加载事件(onload)中加上initFileds()就可以记录页面的初始数据
    在需要判断页面数据是否改变时调用checkModification()方法就可判断数据是否改变
    返回值为true就是已经改变
    返回值为false就是没有改变
       
        // 页面编辑数据
        var inputsData;
        var textareasData;
        var selectsData;
        // 记录下表单中的原始值
        function initFileds() {
            var inputs = document.getElementsByTagName("input");
            var textareas = document.getElementsByTagName("textarea");
            var selects = document.getElementsByTagName("select");
            inputsData = new Array(inputs.length);
            for (var i=0;i<inputs.length;i++) {
                inputsData[i] = inputs[i].value;
                if (inputs[i].type=="radio") {
                    inputsData[i]=inputs[i].checked;
                }
            }
            textareasData = new Array(textareas.length);
            for (var i=0;i<textareas.length;i++) {
                textareasData[i] = textareas[i].value;
            }
            selectsData = new Array(selects.length);
            for (var i=0;i<selects.length;i++) {
                selectsData[i] = selects[i].value;
            }
        }
        /*
         * 判断表单中值是否被修改了
         * submitCommand 表单有改动时,执行的javascript代码
         */
        function checkModification(submitCommand) {
            var inputs = document.getElementsByTagName("input");
            var textareas = document.getElementsByTagName("textarea");
            var selects = document.getElementsByTagName("select");
            var hasBeenChanged = false;
            for (var i=0;i<inputs.length;i++) {
                if (inputs[i].type=="radio"&&(inputs[i].checked!=inputsData[i])) {
                    hasBeenChanged = true;
                    inputsData[i]=inputs[i].checked;
                }
                if (inputs[i].type!="radio"&&inputsData[i]!=inputs[i].value) {
                 if(inputs[i].name!="actionType"){
                     hasBeenChanged = true;
                    }
                    inputsData[i]=inputs[i].value;
                }
            }
            for (var i=0;i<textareas.length;i++) {
                if (textareasData[i]!=textareas[i].value) {
                    hasBeenChanged = true;
                    textareasData[i]=textareas[i].value;
                }
            }
            for (var i=0;i<selects.length;i++) {
                if (selectsData[i]!=selects[i].value) {
                    hasBeenChanged = true;
                    selectsData[i]=selects[i].value;
                }
            }
             if (hasBeenChanged&&confirm("数据已经改变,是否保存?")) {
                 eval(submitCommand);
             }
        }
  • 相关阅读:
    H5系列之drag拖放
    H5系列之contenteditable
    H5系列之新input
    利用css3和js实现旋转木马图片小demo
    利用css3实现照片列表展开小demo
    reduce()、filter()、map()、some()、every()、...展开属性
    ES6,ES7,ES8,ES9,ES10新特性
    Web Components 是什么?它为什么对我们这么重要?
    vscode常用快捷键以及插件
    使用for..in时会遍历对象原型中的自定义属性
  • 原文地址:https://www.cnblogs.com/freeliver54/p/1365942.html
Copyright © 2020-2023  润新知