Jquery 无法重置表单内 id 匹配的输入类型

Question

我有一个使用Jquery的重置按钮，我只想重置id=b的地方，但是当我放置在<form>内部时它不起作用它重置了表单内的一切

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
$(document).ready(function(){
  $("button").click(function(){
    $(".b").val("");
  });
});
</script>

<form action="c.php" method="get">
    <input type="text" name="t1" class="a">
    <input type="text" name="t2" class="b">
    <input type="text" name="t3" class="b">
    <button>Reset</button>
    <input type="submit">
</form>

Answer 1

您需要阻止提交表单的默认操作。

$(document).ready(function () {
    $("button").click(function (e) {
        $("#form2").val("");
        e.preventDefault();
    });
});

看我的小提琴

Answer 2

最好这样做:

<form action="c.php" method="get">
  <input type="text" name="t1">
  <input type="text" name="t2" class="clear-on-reset">
  <input type="text" name="t3" class="clear-on-reset">
  <input id="reset" type="button" value="Reset" />
  <input type="submit" />
</form>

您可以在想要在重置时清除的字段上设置class，例如clear-on-reset你为重置按钮设置自定义id，在我的例子中reset

$(document).ready(function(){
  $("#reset").click(function(){
    $(".clear-on-reset").val("");
  });
});

这样你就不必阻止按钮点击时的默认动作。如果你在表单上添加另一个按钮，会出现问题，因为它会触发相同的'reset'功能，并防止默认。

小提琴链接:点击