input button标签reset属性不能重置表单内容

https://www.seasidecrab.com/amp/747.html

问题说明

input 标签中的 reset 按钮有重置表单的效果，比如，将 text、password textarea 用户输入的内容清空，将单选、多选等恢复默认选择状态等。

一般的表单提交不会用到 reset 按钮，要么提交，要么取消。最近有一需求，需要表单中存在重置按钮。但点击 reset 按钮，表单并没有被重置。

原因分析

网上找到了 reset 不能清空的原因：reset 重置是将表单中的元素标签恢复到初始值或初始状态，当表单中的元素标签存在 value、checked、selected 等属性，reset 重置会恢复到这些属性定义的值或者状态。

首先，reset 必须得在 form 表单内才能生效，其次，input 输入类型的元素标签不能设置默认的 value 值，checkbox、radio 不能设置默认的 checked 选中属性，select 的 option 选择项不能设置 selected 属性值。否则 reset 就达不到置空的效果。

解决方法

使用button标签替代reset标签，利用js将该 value 等值置空。

<%-- 原写法,会出现问题 --%>
<button class="..." type="reset" id="reset"> 重置</button>
<%--把 reset 变更为 button --%>
<button class="..." type="button" id="reset"> 重置</button>

例：重置表单提交内容

<div class="account">
        <!-- novalidate 关闭浏览器校验 -->
        <div class="title">用户登录</div>
        <form id="loginForm" method="post" novalidate="">
            <input type="hidden" name="csrfmiddlewaretoken" value="AGYQvNA7wWvvrSYvk3KWnYW10I9XZKrSQJG8wm06eYIUjdN07yTdw2C7XdvVtaHX">
            
                
                    <div class="form-group">
                        <label for="id_Emp_number">员工号:</label>
                        <input type="text" name="Emp_number" value="1" class="form-control" placeholder="请输入员工号" required="" id="id_Emp_number">
                        <span class="error-msg"></span>
                    </div>
                
            
                
                    <div class="form-group">
                        <label for="id_pwd">密码:</label>
                        <input type="password" name="pwd" class="form-control" placeholder="请输入密码" required="" id="id_pwd">
                        <span class="error-msg"></span>
                    </div>
                
            
                   <!-- 循环到 code 字段时,增加一个 button 获取验证码 -->
                    <div class="form-group">
                        <label for="id_code">图片验证码:</label>
                        <div class="row clearfix">
                            <div class="col-md-7">
                                <input type="text" name="code" value="3" class="form-control" placeholder="请输入图片验证码" required="" id="id_code">
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-md-5">
                                <!-- <img src="aa/aa.png"> -->
                                <!-- 用链接地址 -->
                                <img id="imageCode" src="/web/image/code/" title="看不清？点击刷新！">
                            </div>
                        </div>
                    </div>
                
            
            <div class="row">
                <div class="col-xs-9">
                    <button id="reset" type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                        重置
                    </button>

                    <button type="submit" class="btn btn-primary">
                        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
                        登录
                    </button>

                </div>

            </div>

        </form>

    </div>





    
<script>
    $(function () {
        BindClickImage();
        BindClickEmpty();
    })

    function BindClickImage() {
        $('#imageCode').click(function () {
            var oldSrc = $(this).attr('src');
            //  oldSrc + '?' 相当于当前地址刷新一次  //index/?name=123
            $(this).attr('src', oldSrc + '?');

        })
    }

    function BindClickEmpty() {
        $('#reset').click(function () {
            $('.error-msg').empty();
            $('#id_Emp_number').val('');    //  对 value值写入空字符
            $('#id_code').val('');

        })

    }
    </script>

</div>

将 button 的 type 改为 ‘button ’，因为在form里的submit和reset按钮，点击后有默认事件。

再通过JS对 input 标签的 value 进行修改。