HTML form表单重置按钮无效问题

在编写网页的时候，突然发现有一个页面的查询表单中重置按钮不起作用了。

1.说明：
输入表单内容，不点击查询按钮，直接重置按钮，是可以清空重置表单内容的；
输入表单内容，点击查询按钮，再点击重置按钮，发现重置按钮无效，只能重置到之前输入的内容；

2.原因分析及解决办法：
查了一下w3c的标准文档，其中给的解释说是因为，type="reset"的input标签，点击后只是重置到默认值，这就很好解释了为什么不点击查询按钮可以重置表单数据为空，
而在点击了查询(submit类型)按钮之后，表单各数据内容就等于有值了，所以点击重置不能达到预期重置表单数据为空的目的。
所以，最后只能这样做，自己编写js绑定事件手动重置表单数据为空，看代码如下：
// 首先在reset按钮上加一个样式：btn-reset
<button class="btn-reset" type="reset">重   置</button>
 
// 为 btn-reset 样式的重置按钮绑定鼠标点击事件
<script>
$(function(){
  $('.btn-reset').onclick(function(){
    $('#name').val('');
    $('#category').val('');
  });
})
</script>