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

Question

我有一个具有多个textboxes和buttons的form。我想使用一些按钮清除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

按钮的类型属性。可能的值是：

1. 提交：该按钮将表单数据提交给服务器。如果未指定属性，或者该属性被动态更改为空或无效的值，这是默认值。

2. 重置：该按钮将所有控件重置为其初始值。

3. 按钮：该按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本，这些事件发生时会触发。

4. 菜单：该按钮打开了通过其指定元素定义的弹出菜单。

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