jQuery判断保单是否修改,离开提示

   jquery如何判断表单是否修改,点击放弃修改按钮或者离开页面提示用户表单修改过,是否离开页面。


<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>

 


原创文章,转载请注明出处:jQuery判断保单是否修改,离开提示

评论(0)Web开发网
阅读(337)喜欢(0)JavaScript/Ajax开发技巧