jquery - 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>

您在要在重置时清除的字段上设置类，例如clear-on-reset 您为重置按钮设置自定义 ID，在我的情况下为重置

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

这样您就不必阻止按钮单击时的默认操作。如果您在表单上添加另一个按钮，则会出现问题，因为它会触发相同的“重置”功能并阻止默认设置。

小提琴链接：点击