如果我单击表单内的另一个按钮，如何防止 HTML 表单提交？ [关闭]

Question

这是 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 内插入粗体标签的按钮，但是当我单击粗体按钮时，它会提交表单。我知道它可能会这样做，因为我在表单上有提交事件侦听器，但是每个事件侦听不同的触发器并且按钮类型也不同。

有没有办法让这个工作，同时保持表单元素上的事件监听器？

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

Answer 1

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

Answer 2

我解决了你的问题，你的 javascript 函数有很多错误，你需要定义你的函数 insertCursor。

检查此代码笔：

var myForm = document.getElementById('myform');
var myText = document.getElementById('myText');
var boldBtn = document.getElementById('boldBtn');

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

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

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

谢谢