【前端用法】form表单重置、清空方法记录

最新推荐文章于 2023-08-14 18:24:00 发布

No8g攻城狮

最新推荐文章于 2023-08-14 18:24:00 发布

阅读量8.2k

点赞数 2

分类专栏：前端相关文章标签： form 清空表单表单重置 form清空表单

本文链接：https://blog.csdn.net/weixin_44299027/article/details/104040344

版权

前端相关专栏收录该内容

62 篇文章 5 订阅

订阅专栏

首先：contact-form 是form的id属性值

方法一：调用reset（）方法

document.getElementById("contact-form")[0].reset();

注意：网上说用document.getElementById("myform").reset();可以重置的，实际上并不能清空表单内容，因为用document.getElementById()或者document.getElementByClassName()得到的是数组。原因就是我们每次通过jQuery选择器得到的都是数组。而通过document.getElementById("myform")[0];得到的是对象。对象才能调用方法。

另外注意：这种方式虽然可以重置表单，但是不能重置隐藏字段。隐藏字段要单独处理。

方法二：逐个清空input，selected的值

function resetAll() {
        $(".contact-form").find('input[type=text],select,input[type=hidden]').each(function() {
            $(this).val('');
        });
    }

方法三：排除法清空form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单重置</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <form action="" method="post" class="contact-form">
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" value="" placeholder="请输入名字"/>
        <label>性别：</label>
        <input type="radio" name="sex" checked value=""/>男
        <input type="radio" name="sex" value=""/>女
    </form>
    <input type="button" name="" value="重置" onclick="resetForm()"/>
    
    <script type="text/javascript">
        function resetForm() {
            $(':input', '.contact-form')
                .not(':button, :submit, :reset, :hidden,:radio') // 去除不需要重置的input类型
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        }
    </script>
</body>
</html>

完结！

No8g攻城狮

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
4
评论
【前端用法】form表单重置、清空方法记录

首先：contact-form 是form的id属性值方法一：调用reset（）方法document.getElementById("contact-form")[0].reset();注意：网上说用document.getElementById("myform").reset();可以重置的，实际上并不能清空表单内容，因为用document.getElementById()或者do...
复制链接

扫一扫