表单提交回写页面之后，重置按钮失效

问题描述

页面内提供了数据查询功能，查询字段为姓名和手机号，提交查询请求之后，重置按钮失效；但是在查询之前执行重置的话是可行的。如图所示：

<form action="${model.viewPath}?groupid=${param.groupid}" class="formBody" >
				<input type="hidden" name="groupid" value="${param.groupid}">
				<div class="row">
					<div class="form-item">
						<label>客户姓名</label>
						<div class="form-group" >
							<input type="text" style="width: 80%" name="name" id="name" maxlength="32" value="${param.name}"/>
						</div>
					</div>
					<div class="form-item">
						<label>手机号</label>
						<div class="form-group">
							<input type="text" style="width: 80%" name="tel" maxlength="32" id="tel" value="${param.tel}"/>
						</div>
					</div>
					<button type="submit" style="margin-right:10px;margin-left:100px" class="btn btn-primary">
						查询
					</button>
					<button type="reset" class="btn btn-info">
						 重置
					</button>


				</div>
			</form>

问题分析

查了一下w3c的标准文档，其中给的解释说是因为，type="reset"的input标签，点击后只是重置到默认值，这就很好解释了为什么不点击查询按钮可以重置表单数据为空，
而在点击了查询(submit类型)按钮之后，表单各数据内容就等于有值了，所以点击重置不能达到预期重置表单数据为空的目的。

解决方式：

• 需要手动定义重置按钮事件

方式一

// 为 btn-reset 样式的重置按钮绑定鼠标点击事件
<script>
$(function(){
  $('.btn-reset').onclick(function(){
    $('#name').val('');
    $('#tel').val('');
  });
})
</script>

我采用了这种方式没有成功，可能跟我页面上其他的元素有冲突吧，函数执行了，但是就没有成功置空，很纳闷。

方式二

$("form").on("click", "button[type='reset']", function(){
    var $inputs = $("form").find("input");
    for(var i = 1; i < $inputs.length;i++){
        $($inputs[i]).val("");
    }
    return false;
});

为reset按钮绑定事件，获取表单中的所有input控件，然后遍历置空，这种方式是比较有效的。

注意：我的表单中有个隐藏字段（type=hidden）为groupid，当执行之后我发现，groupid的值也被我置空了，这不是我想要的，这个是查询必备的字段值

• 排除掉hidden字段（添加type=‘text’)或者可以按照索引进行过滤，也可以使用filter函数等

$("form").on("click", "button[type='reset']", function(){
    var $inputs = $("form").find("input[type='text']");
    for(var i = 1; i < $inputs.length;i++){
        $($inputs[i]).val("");
    }
    return false;
});

附手动表单重置的方法（重置下拉框和文本框）

<script type="text/javascript">
       function  res(){
           var form = document.getElementById("searchForm");
           form.reset();//文本框重置
           $("#channelHtml").val("").trigger('change');//下拉框重置
           $("#isLeague").val("").trigger('change');
        };
    </script>