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

谁践踏了优雅 2022-04-25 08:08 261阅读 0赞

#### 问题描述 ####

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

#### 问题分析 ####

查了一下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;
    });

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW56aG91X3lo_size_16_color_FFFFFF_t_70]: /images/20220125/6bb1776f6be94c7abe77487289a5f70e.png