如何防止在JavaScript中单击其他按钮而不是提交按钮上提交表单

表单中有两个按钮，一个用于提交表单，另一个用于隐藏表单的关闭按钮。但问题是表单也是在单击关闭按钮时提交的，我不希望出现这种行为，也不希望将关闭按钮放在表单之外

<form class="add_form" id="add_list_form">
  <input type="text" class="form-control" placeholder="Enter list title..." id="list_value" />
  <div class="mt-2">
    <button type="submit" class="btn btn-sm btn-success mr-1" id="add_list_btn">Add List</button>
    <button class="btn btn-sm btn-danger" id="close_btn">close</button>
  </div>
</form>
<script>
  const add_list_form = document.querySelector('#add_list_form'); 
  add_list_form.addEventListener('submit',(e)=>{ e.preventDefault(); 
  console.log('form is submitted..') })
<script>

添加列表
关闭
const add_list_form=document.querySelector（“#add_list_form”）；
add_list_form.addEventListener（'submit'，（e）=>{e.preventDefault（）；
log（'表单已提交..'））

确保为这两个按钮添加了正确的

类型

属性

<button type="submit">Submit</button>
<button type="button">Close</button>

提交
接近

确保为这两个按钮添加了正确的

类型

属性

<button type="submit">Submit</button>
<button type="button">Close</button>

提交
接近
 >添加>代码>类型=“按钮”<代码>属性在关闭按钮标签中，在不指定此类型属性的情况下，浏览器在窗体元素中默认地将每个按钮视为提交按钮。

关闭按钮元素应如下所示：

<button type="button">close</button>

关闭
 >添加>代码>类型=“按钮”<代码>属性在关闭按钮标签中，在不指定此类型属性的情况下，浏览器在窗体元素中默认地将每个按钮视为提交按钮。

关闭按钮元素应如下所示：

<button type="button">close</button>

关闭
您可以将
type=“button”
添加到要用于隐藏表单的按钮，这将删除默认行为

举个例子,


const form=document.getElementById（'form'）；
const otherBtn=document.getElementById（'close-btn'）；
otherBtn.addEventListener（'click'，（）=>{console.log（'Close button was clicked'）}）；
form.addEventListener（'submit'，（e）=>{e.preventDefault（）；console.log（“表单已提交”）}

提交
接近
您可以将
type=“button”
添加到要用于隐藏表单的按钮，这将删除默认行为

举个例子,


const form=document.getElementById（'form'）；
const otherBtn=document.getElementById（'close-btn'）；
otherBtn.addEventListener（'click'，（）=>{console.log（'Close button was clicked'）}）；
form.addEventListener（'submit'，（e）=>{e.preventDefault（）；console.log（“表单已提交”）}

提交
接近
您可以在js方法preventDefault（）中使用，默认情况下不进行默认提交或重新加载
您可以在js方法preventDefault（）中使用，默认情况下不进行默认提交或重新加载
请显示这些按钮的代码请显示这些按钮的代码