向表单添加多个字段

Question

我遵循了有关StackOverflow的教程，该教程介绍如何使用jQuery向HTML表单添加多个字段。当我使用提供的代码时，当我单击按钮添加更多字段时，它会使我的表单提交。

如何解决此问题？

$("button").on("click", function() {
  var extra = $(this).attr("extra") + 1;
  $("form").append("<input type='text' placeholder='Other Field' name='field' />");
  $(this).attr("extra", extra);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="form_sent.php" method="post">
  <div id="fields">
    <input name="name" type="text" placeholder="Name"><br>
    <input name="phone" type="text" placeholder="Phone"><br>
    <input name="email" type="text" placeholder="E-Mail"><br><br>
  </div>
  <button>Add more fields</button><br><br>
  <input type="submit" name="submit" value="Submit" />
</form>