html 对话框元素是否嵌套在表单元素中?

vlf7wbxs  于 2023-05-21  发布在  其他
关注(0)|答案(2)|浏览(166)

我有一个表单,我想使用对话框来确认提交。对我来说,将对话框嵌套在表单中会很方便,这样当用javascript查询它们时,就可以更容易地确定哪个对话框属于哪个表单。下面是两个最小的例子。在第一种情况下,对话框位于窗体外部,并按预期工作。在第二种情况下,对话框嵌套在表单中,由于某种原因,只有“是”按钮起作用,“否”按钮不起作用。

const form = document.getElementById("myForm");
const dialog = document.getElementById("confirmDialog");
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  dialog.showModal();
});

confirmBtn.addEventListener("click", function() {
  dialog.close();
  form.submit(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // Cancel form submission
});
<form id="myForm">
  <input type="submit" value="Submit" />
</form>
<dialog id="confirmDialog">
  <p>Are you sure you want to submit this form?</p>
  <menu>
    <button id="confirmBtn">Yes</button>
    <button id="cancelBtn">No</button>
  </menu>
</dialog>
const form = document.getElementById("myForm");
const dialog = document.getElementById("confirmDialog");
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  dialog.showModal();
});

confirmBtn.addEventListener("click", function() {
  dialog.close();
  form.submit(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // Cancel form submission
});
<form id="myForm">
  <input type="submit" value="Submit" />
  <dialog id="confirmDialog">
    <p>Are you sure you want to submit this form?</p>
    <menu>
      <button id="confirmBtn">Yes</button>
      <button id="cancelBtn">No</button>
    </menu>
  </dialog>
</form>
chhkpiq4

chhkpiq41#

默认情况下,<form>中的任何按钮都是提交按钮。
submit:该按钮将表单数据提交到服务器。如果未为与<form>关联的按钮指定属性,或者属性为空或无效值,则此属性为默认值
因此,您可以通过在侦听器中使用the preventDefault() method来避免提交表单的默认操作。
我会建议改变这些按钮的type,以解决问题更接近根本原因,并避免不可预见的后果。例如,辅助技术可能会假设它们是提交按钮。
button:按钮没有默认行为,默认情况下按下时不执行任何操作。它可以让客户端脚本侦听元素的事件,这些事件在事件发生时触发。

const form = document.getElementById("myForm");
const dialog = document.getElementById("confirmDialog");
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  dialog.showModal();
});

confirmBtn.addEventListener("click", function() {
  dialog.close();
  form.submit(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // Cancel form submission
});
<form id="myForm">
  <input type="submit" value="Submit" />
  <dialog id="confirmDialog">
    <p>Are you sure you want to submit this form?</p>
    <menu>
      <button type="button" id="confirmBtn">Yes</button>
      <button type="button" id="cancelBtn">No</button>
    </menu>
  </dialog>
</form>
wsewodh2

wsewodh22#

看起来当对话框嵌套在表单中时,“否”按钮上的单击事件会触发表单提交默认,从而阻止您自行处理取消操作。
您可以通过调用preventDefault()method修改代码,以防止单击“否”按钮时默认表单提交:

const form = document.getElementById("myForm");
const dialog = document.getElementById("confirmDialog");
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  dialog.showModal();
});

confirmBtn.addEventListener("click", function() {
  dialog.close();
  form.submit(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  event.preventDefault(); // Cancel form submission
  dialog.close(); // Cancel form submission

});
<form id="myForm">
  <input type="submit" value="Submit" />
  <dialog id="confirmDialog">
    <p>Are you sure you want to submit this form?</p>
    <menu>
      <button id="confirmBtn">Yes</button>
      <button id="cancelBtn">No</button>
    </menu>
  </dialog>
</form>

相关问题