hidden表单值无法重置的缺陷

最新推荐文章于 2023-11-21 16:21:20 发布

原创最新推荐文章于 2023-11-21 16:21:20 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #hidden #缺陷 #处理 #重置

前端问题专栏收录该内容

6 篇文章

订阅专栏

本文探讨了HTML表单中hidden组件无法通过form自带reset方法重置的问题，并提供了解决方案，建议使用jQuery插件进行特殊处理。

在项目开发过程中发现form表单控件中的hidden表单组件无法被form自带的reset函数重置未默认值所以针对hidden组件进行以下测试代码如下 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body>
    <form id="form1" action="">
        <input id="hidden1" type="hidden" value="DefaultValue">
        <input id="text1" type="text">
        <button  type="button" onclick="changeHiddenValue()">改变hidden表单的值</button>
        <button  type="button" onclick="getHiddenValue()">获取hidden表单的值</button>
        <button  type="button"  onclick="getHiddenValueAttribute()">获取hidden表单中默认的value属性的值</button>
        <button  type="button"  onclick="resetHidden()">重置hidden表单</button>
        <button  type="reset">重置</button>
    </form>
    <script>
        (function(){ 
            getHiddenValue();
        })();

        function changeHiddenValue(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            hidden.value = text.value
        }
        function getHiddenValue(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            text.value = hidden.value;
        }
        function resetForm(){ 
            var form = document.getElementById("form1");
            form.reset();
            getHiddenValue();
        }
        function getHiddenValueAttribute(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            alert(hidden.getAttribute("value"));
            text.value = hidden.getAttribute("value");
        }
    </script>
</body>

</html>