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

标签 javascript jquery html

我正在尝试将 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?");
}

最佳答案

  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>

关于javascript - 在我的表单按钮上实现 inform() 函数时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53762104/

相关文章:

javascript - 嵌套子指令根元素如何在父指令根元素的同一级别工作?

php - 在 jquery each 中循环 laravel 数组集合

javascript - jQuery:如何从内部加载回调修改加载的内容

javascript - Babylon.js 去除球体的光反射

javascript - 这个冒泡排序的实现是错误的吗?

javascript - 为什么 Google Fonts 通过 Visual Studio 可以工作一半?

jquery - 多个选择器或多个函数 - 有效率提升吗?

jquery - 使用 jquery 在 div 内滚动

html - 导航项上的当前链接 blip

php - 基于下拉菜单选择的 SQL 查询