20080904--判断表单中的元素值是否改变了

最新推荐文章于 2021-07-22 22:12:57 发布

最新推荐文章于 2021-07-22 22:12:57 发布 · 273 阅读

标签

#IE #J#

每日小点滴专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种检测HTML表单是否发生变更的方法。通过比较表单元素的当前值与其默认值来判断表单是否已被修改。适用于需在提交前确认表单变更情况的场景。

使用场景:有些页面，除了保存之外还有一些别的按钮，在点击别的按钮之前，需要看用户是否有没有保存的表单域，如果有，则需要提示用户先保存，这时时候就要判断表单域中的内容是否改变了。

实现方式：Form中的每个对象都保留了初始值，所以可以在提交表单时，遍历Form中对象，
检查对象当前的值与初始值是否一致，就判断出了表单是否被修改了。

function IsFormChanged()
 {
    var isChanged = false;
    var form = document.forms[0];
    for (var i = 0; i < form.elements.length; i++)
    {
        var element = form.elements[i];
        var type    = element.type;
        if (type == "text" || type == "hidden" || type == "textarea" || type == "button")
        {
            if (element.value != element.defaultValue)
            {
                isChanged = true;
                break;
            }
        }
        else if (type == "radio" || type == "checkbox")
        {
            if (element.checked != element.defaultChecked)
            {
                isChanged = true;
                break;
            }
        }
        else if (type == "select-one")
        {
            for (var j = 0; j < element.options.length; j++)
            {
                if (element.options[j].selected != element.options[j].defaultSelected)
                {
                    isChanged = true;
                    break;
                }
            }
        }
        else
        {
            //
        }
    }

    return isChanged;
}