Question

我有form个textboxes和buttons。我想使用一些按钮来清除textbox。但是当我点击按钮Clear text时，表单就会被发布。

有人知道如何解决这个问题吗？

这是我的HTML：

<form name="reaction" method="post" action="./send.php">
  <input type="text" name="firstname">
  <button class="btn btn-default" onclick="ClearText1();">Clear text</button><br />

  <input type="text" name="lastname">
  <button class="btn btn-default" onclick="ClearText2();">Clear text</button><br />

  <button class="btn btn-block btn-success">Send</button>
</form>

Answer 1

使用<button type="submit"提交按钮，<button type="button"用于其他按钮。您可以在此处阅读有关按钮的更多信息。

来自MDN

按钮的type属性。可能的值有：

提交：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
重置：该按钮会将所有控件重置为初始值。
按钮：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些事件在事件发生时触发。
菜单：该按钮打开一个通过其指定元素定义的弹出菜单。

<form name="reaction" method="post" action="./send.php">
  <input type="text" name="firstname">
  <button type="button" class="btn btn-default" onclick="ClearText1();">Clear text</button><br />

  <input type="text" name="lastname">
  <button  type="button" class="btn btn-default" onclick="ClearText2();">Clear text</button><br />

  <button  type="submit" class="btn btn-block btn-success">Send</button>
</form>

Answer 2

使用event.preventDefault（）;防止此按钮的默认提交行为。

<script>
        function ClearText2(event){
            // your code....
             event.preventDefault();
        }
    </script>

<form>中的所有按钮都是发布的

2 个答案: