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 进行修改。