我有一个表单，我想使用一个对话框来确认提交.对我来说，将对话框嵌套在表单中会很方便，这样在使用Java脚本查询对话框时，就可以更容易地确定哪个对话框属于哪个表单.以下是这方面的两个最小示例.在第一个示例中，该对话框位于表单外部，并按预期工作.在第二种情况下，对话框嵌套在表单中，由于某种原因，只有是按钮起作用，而否按钮什么也不做.
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>