如何判断表单是否修改过,修改过未保存提示用户

用户js或者jquery判断表单是否修改过,包括checkbox,radio的状态勾选变换,如果修改过用户未保存数据,就关闭或者访问其他页面离开当前页面,提示用户信息未保存。

2个回答

 <script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<title>jQuery判断保单是否修改,离开提示</title>
<form name="myform">
text:<input type="text" name="text" /><br />
textarea:<textarea name="textarea"></textarea><br />
radio:<input type="radio" name="radio" value="radio1" />radio1 <input type="radio" name="radio" value="radio2" />radio2<br />
checkbox:<input type="checkbox" name="checkbox" value="checkbox1" />checkbox1 <input type="checkbox" name="checkbox" value="checkbox2" />checkbox2 <input type="checkbox" name="checkbox" value="checkbox3" />checkbox3<br />
checkbox-signle:<input type="checkbox" name="checkbox1" value="checkbox1" />checkbox1<br />
select-single:<select name="selsg"><option value="">...</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><br />
select-multiple:<select name="selmul" multiple><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
</form>
<script>
    function setOldValue(f) {
        $(':input', f).each(function () {
            $(this).data('ov',
                this.type == 'radio' || this.type == 'checkbox' ? this.checked :
                this.type == 'select-multiple' ? $(this).find('option:selected').map(function () {return this.value }).get().join() :
                this.value);
        })
    }
    function isModify(f) {
        var modify = false;
        $(':input', f).each(function () {
            var v =this.type == 'radio' || this.type == 'checkbox' ? this.checked :
                this.type == 'select-multiple' ? $(this).find('option:selected').map(function () { return this.value }).get().join() :
                this.value;
            if (v !== $(this).data('ov')) { modify = true; return false}
        });
        console.log(modify,'mdy')
        return modify;
    }
    setOldValue(document.myform);
    window.onbeforeunload = function (e) {
        if (isModify(document.myform)) return (e || window.event).returnValue = '表单已经修改过,确认离开?!';
    }
</script>

设置隐藏input,提交的时候,比较一下。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐