时间戳

首页 > 解决方案 > 如果我单击表单内的另一个按钮，如何防止 HTML 表单提交？

javascript - 如果我单击表单内的另一个按钮，如何防止 HTML 表单提交？

问题描述

这是HTML代码：

<form action="#" method="POST" id = "myForm">
 <div>     
      <div><p><label for = "myText"><b>Article Text </b></label>
      <button type = "button" id="boldBtn">Bold</button></p></div>
      <textarea name ="myText" id = "myText" rows="20" cols="55"></textarea>
 </div>
 <div>
      <input type="submit"  class="btn btn-outline-secondary btn-lg"  value = "Submit">
 </div>
</form>

这是javascript代码：

const myForm = document.getElementById('myForm');
const myText = document.getElementById('myText');
const boldBtn = document.getElementById('boldBtn');

myForm.addEventListener('submit', function(event) {
     event.preventDefault();
    const formData = new FormData(myForm);
     //..............
     //code to send data to PHP
});

boldBtn.addEventListener('click', function(event) {
    event.preventDefault(); 
    //insertAtCursor(myText,"BOLD text here");
});

我想添加一个在 textArea 内插入粗体标签的按钮，但是当我单击粗体按钮时，它会提交表单。我知道它可能会这样做，因为我在表单上有提交事件侦听器，但是每个事件都侦听不同的触发器，并且按钮类型也不同。

有没有办法使这项工作，并将事件侦听器保持在表单元素上？

如果不是，这个问题的正确解决方案是什么？

标签： javascripthtmlbuttonaddeventlistenerform-submit

解决方案

你在正确的轨道上。我已将您的代码添加到代码段中，并且不会提交单击粗体按钮。因此，您向我们展示的内容是正确的。其他原因导致您的问题，其他一些代码执行您未共享的提交。请打开开发工具，单击网络选项卡，然后单击我的代码片段中的粗体按钮。您是否看到代表提交的新行？如果不是，那么您显示的代码是正确的，并且是其他原因导致了问题。您将需要调试已有的 Javascript。

<form action="#" method="POST" id = "myForm">
 <div>     
      <div><p><label for = "myText"><b>Article Text </b></label>
      <button type = "button" id="boldBtn">Bold</button></p></div>
      <textarea name ="myText" id = "myText" rows="20" cols="55"></textarea>
 </div>
 <div>
      <input type="submit"  class="btn btn-outline-secondary btn-lg"  value = "Submit">
 </div>
</form>

推荐阅读