在我的表单按钮上实现 confirm() 函数时遇到问题

Question

我正在尝试将confirm()函数添加到位于用于更新图像信息的页面上的 2 个按钮。第一个按钮保存有关图像的已更改信息，第二个按钮删除图像。这两个按钮都在开机自检表单中。可悲的是，我面临着几个问题。

首先，即使当我单击保存信息的按钮时弹出确认框，表单也会在我单击确认框中的"确定"或"取消"并保存信息之前发送 POST 请求。

其次，我相信删除按钮也有同样的作用。弹出询问我是否要删除的框，即使我不单击任何内容，图像也会从我的数据库中删除。此外，如果我单击"取消"，效果是相同的，图像将从我的数据库中删除。

最后，为什么它说confirmFunction()在内部时没有定义$(document).ready(function() {})但在外部时工作正常？

使用编辑按钮的第一个窗体。

<form action="{{ route('updateArtwork', $image) }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class='label' for="artwork-tags">Tags</label>
<input class='input' type="text" name="artwork-tags" placeholder="Tags" value='{{ $tagString }}'>
</div>
<button onclick='confirmFunction()' class='green-btn' type="submit" name="submit">Save</button>
</form>

使用删除按钮的第二种形式。

<form method="POST" action="{{route('DeleteArtwork', $image->id)}}">
<button onclick='confirmFunction()' class='red-btn' type="submit">Delete Image</button>
</form>

JavaScript：

$(document).ready(function() {
});
function confirmFunction() {
confirm("Are you sure?");
}

Answer 1

1. 使用 JavaScript 获取表单(我在示例中使用了id)
2. 添加提交事件侦听器(提交表单时触发)
3. 在提交时做你想做的事情

function confirmFunction(event) {
const okToContinue = confirm("Are you sure?");
if (okToContinue === false) {
event.preventDefault();
}
}
document.getElementById('form').addEventListener('submit', (event) => {
confirmFunction(event);
});

<form id="form" method="GET" enctype="multipart/form-data">
<div class="form-group">
<label>Label</label>
<input type="text" name="value" placeholder="value" value='value'>
</div>
<button type="submit" name="submit">Save</button>
</form>