0

代码：

<script type="text/javascript">
$(".reset_form").click(function() {
    $(this).closest('form').find("input, textarea").val("");
});
</script>

按钮：

<div class="reset_form">
    <a class="anchor_link">
        <span class="reset_button">
            Reset
        </span>
    </a>
</div>

使用上面的代码，我希望能够在用户单击 reset_form 时清除其内容的输入字段。但是，作为 JS/JQuery 的新手，我不确定如何实现这一点，因为我使用的不是输入按钮，而是一个看起来像按钮的 div。

问题

我如何调整我的代码，以便当用户单击 .reset_button 时，这些字段将被清除？

4

4 回答 4

1 
<div class="form-container">
    <form>
        <input type="text" />
        <textarea></textarea>
    </form>
    <div class="clear-form">
        <span class="reset_button">Reset form</span>
    </div>
</div>

$(document).ready(function() {
    $('.clear-form').on('click', function() {
        $(this).closest('.form-container').find('input, textarea').val('');
    });
});

小提琴

于 2013-08-27T17:56:58.210 回答
1

为了帮助您使用 DOM 遍历选择器closest()和find()，首先需要大致了解您的表单相对于 .reset_form 的位置<div>，它是否具有 ID 属性（这使得选择表单非常容易）等.

但是，假设页面上只有一个表单，则此代码将起作用：

工作 jsFiddle 示例

$(".reset_form").click(function() {
    $('form').find("input, textarea").val("");
});

正如 Jedediah 下面提到的，上面的代码将重置/清除页面上的所有表单。如果您只想清除一个特定的表单，那么您可以在表单标签中指定一个 ID，因此：

<form id="justthisform"> ...  </form>

您可以通过如下修改活动行来仅清除该表单：

$('#justthisform').find("input, textarea").val("");
于 2013-08-27T17:46:52.950 回答
0

如果您想清除表单中的所有元素（收音机重置为默认值、下拉菜单等），您可以在表单 DOM 对象上使用本机重置，但使用 jquery 来查找它，如下所示：

<script type="text/javascript">
$(".reset_form").click(function() {
    $(this).closest('form')[0].reset();
});
</script>
于 2013-08-27T17:51:10.290 回答
0

需要注意的一件事是 HTML 表单本身支持通过浏览器中的重置功能进行重置：

$(".reset_form").click(function() {
  $(this).closest('form')[0].reset();
});

但是，是的，如果您的功能不起作用，那么看起来您的（假）按钮没有嵌入在表单本身中。如果你这样做，jQuery 的 .closest() 函数会找到表单

$(this).closest("form")

所以你唯一需要解决的就是找到那个表格。

于 2013-08-27T17:51:41.770 回答