时间戳

首页 > 解决方案 > 在我的表单按钮上实现确认（）功能时遇到问题

javascript - 在我的表单按钮上实现确认（）功能时遇到问题

问题描述

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

首先，即使当我单击保存信息的按钮时弹出确认框，表单在我单击确认框中的“确定”或“取消”之前发送 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?");
}

标签： javascriptjqueryhtml

解决方案

  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>

推荐阅读