首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想在laravel的表单模式下给我的Delete按钮添加一个确认按钮

在 Laravel 的表单模式下给 Delete 按钮添加一个确认按钮,可以通过以下步骤实现:

  1. 在 Blade 模板文件中,找到对应的表单,通常是使用 <form> 标签包裹的部分。
  2. 在 Delete 按钮所在的表单中,添加一个额外的确认按钮,可以使用 <button> 标签或者 <input type="button"> 标签来创建。
  3. 给确认按钮添加一个点击事件,可以使用 JavaScript 或者 jQuery 来实现。在点击事件中,弹出一个确认框,询问用户是否确定执行删除操作。
  4. 如果用户点击确认,再通过 JavaScript 或者 jQuery 来触发表单的提交操作,以执行删除操作。
  5. 如果用户点击取消,可以选择不执行任何操作或者进行其他处理。

下面是一个示例代码:

代码语言:txt
复制
<form action="/delete" method="POST">
    <!-- 其他表单字段 -->
    {{ csrf_field() }}
    <button type="button" id="confirmDelete">Delete</button>
</form>

<script>
    document.getElementById("confirmDelete").addEventListener("click", function() {
        if (confirm("确定要删除吗?")) {
            // 用户点击确认,提交表单
            this.parentNode.submit();
        } else {
            // 用户点击取消,不执行任何操作
        }
    });
</script>

在这个示例中,我们使用了一个 <button> 标签来创建确认按钮,并给它添加了一个点击事件。在点击事件中,使用 confirm() 函数弹出一个确认框,询问用户是否确定执行删除操作。如果用户点击确认,通过 this.parentNode.submit() 来提交表单,实现删除操作。如果用户点击取消,不执行任何操作。

请注意,示例中的表单提交地址为 /delete,你需要根据实际情况修改为你的删除操作的路由地址。另外,为了保证安全性,表单中使用了 Laravel 的 CSRF 保护,通过 {{ csrf_field() }} 添加了一个隐藏的 CSRF 令牌字段,确保请求的合法性。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云服务器(CVM):提供弹性计算能力,可根据业务需求弹性伸缩,支持多种操作系统和应用场景。详情请参考:腾讯云服务器产品介绍
  • 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,适用于存储和处理各种类型的文件和数据。详情请参考:腾讯云对象存储产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

30分钟用Laravel实现一个博客

进入 “修补匠模式” php artisan tinker , 当命令提示符变为 ">>>" 时,你就处于tinker模式下了,此时你可以输入php代码,或者调用laravel提供全局函数,甚至引用一个类...在 tinker 模式使用全局函数 factory() 生成模拟数据 factory(App\Blog::class)->make() 此时屏幕上会显示,它给你模拟出来一个虚拟数据数组。...我们其实需要设置很多路由,来对应生成 BlogController 各种方法,Laravel已经帮我们想到了所以它给我们提供了这样一种方法配置路由,编辑 /routes/web.php ,在最后面添加这么一句...id }}"> @csrf {{-- 这里伪造DELETE请求 --}} @method("DELETE") “删除文章” 按钮其实是调用了一个 js 函数,...视图方面 我们有通过 auth 生成模板 Laravel 自带 bootstrap4 + jquery 所以我们解决了css和js问题 => 我们只是写了一个确认删除” 前端代码 数据库方面

7.4K00

Laravel 表单方法伪造与 CSRF 攻击防护

表单请求方法伪造 要告知 Laravel 当前提交表单使用是 GET/POST 之外其他请求方式,需要在表单添加一个名为 _method 隐藏字段,字段值是「PUT」、「DELETE」或 「PATCH...$id; })->name('task.delete'); 在 http://blog.test/task/1/delete 点击「删除任务」按钮提交表单,会显示 419 异常页面: ?...不得不说,Laravel 5.7 引入错误提示页面虽然好看,但是错误提示信息太少,这其实是因为默认情况,为了安全考虑,Laravel 期望所有路由都是「只读」操作(对应请求方式是 GET、HEAD...避免跨站请求伪造攻击措施就是对写入操作采用非 GET 方式请求,同时在请求数据中添加校验 Token 字段,Laravel 也是这么做,这个 Token 值会在渲染表单页面时通过 Session 生成...页面点击「删除任务」按钮,即可成功提交表单

8.7K40
  • 持续发布公众号文章后终于吸引到同频的人找我一起合作做个小区智慧物业系统!

    最令我惊喜是上周三把一篇刚公众号文章SpringBoot 整合 Vue3 与 Element-Plus 完成系统页面表单和表格功能开发 分享到自己朋友圈后,就有一个之前给我推荐工作技术小哥找我一起做一个小区智慧物业系统...选中业主后回到添加房屋表单界面后点击右下角提交按钮后就可以看到楼栋单元对应房屋信息 7)添加费用项 缴费前需要先添加费用项目,进入费用->费用项设置菜单界面,选中物业费后点击右边添加按钮会打开添加物业收费项对话框...在弹出添加对话框表单中输入具体物业收费项信息 点击右下角保存按钮后就可以看到添加费用项数据了 8)添加发票抬头 开发票时候需要有发票抬头,因此在没有发票抬头可选情况需要先添加发票抬头 进入房产...->发票抬头菜单界面,点击右边添加按钮进入添加发票抬头表单界面,填写发票抬头信息 点击保存后可以看到刚才添加发票抬头数据 在此之前笔者已经为业主张三创建了一个企业为江苏银河物业管理公司发票抬头 9...点击右边操作列中预存 按钮弹出添加预存表单对话框 输入预存金额并选择支付方式和账户类型后点击保存按钮 10)业主缴费 然后我们继续回到物业受理页面点击创建费用按钮下面的欠费缴费按钮 进入缴费确认页面

    19010

    通过 Laravel 创建一个 Vue 单页面应用(五)

    ('/users/{user}', 'UsersController@destroy'); }); 在前端删除用户 我们将通过编辑 UsersEdit.vue 组件,在Update按钮新增一个Delete...按钮方式,向 /users/:id/edit 视图组件中添加删除功能。...$router.push({ name: 'users.index' }); }); } 如果你刷新应用,并且删除一个用户,你将会注意到禁用按钮一个短暂闪烁,然后然后浏览器在没有任何反馈情况导航到...404 你可能注意到了即使我们 Vue路由与 /users/:id/edit 模式相匹配, 但是当用户 id 不存在时,我们依然可能收到一个 404 响应。...如果你想了解灵活客户端提供所有细节,文章构建灵活Axios客户端中详细讨论了这个想法。 在不改变客户机外部 API 情况,我们可以改变客户机在后台工作方式。

    4.4K20

    详解laravel passport OAuth2.04种模式

    access_token 准备 见文档: https://xueyuanjun.com/post/1… 4种模式 记得用 artisan passport:client 添加对应用户 对应不同应用场景:...授权码模式(authorization_code) 实现类似微信授权登录服务.这个当然是最强大也最复杂. 用户点击客户端微信登录按钮,url跳转到微信登录页面, (比如微信登录) ?...无认证过程,客户端登录时直接带上资源服务器注册过账号密码,就像使用同一个账户系统....需添加middleware: \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class 这个 Passport 中间件将会附加 laravel_token...OAuth2.04种模式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家

    3.6K30

    在博客后台为内容模块实现增删改查功能

    作为 PHP 博客实战项目的终结篇,我们将在后台管理系统为专辑、文章、消息模块添加增删改查功能,来完成内容生产和消费闭环。...> 这里我们还引入了一个局部组件 pagination.php,它位于 album 上一级目录 admin ,用于渲染列表页分页组件: 修改专辑表单 修改表单和新增表单非常类似,其实是可以合并到一个视图(留给大家作为课后作业去实现)。 resources/views/admin/album/edit.php: ">删除 这段代码会弹出一个删除模态框,对应 HTML 代码位于 resources/views/admin/delete.php 中: <!...最后,我们可以在专辑列表页通过删除按钮删除对应专辑,删除前会弹出确认模态框,确认之后就会删除这个专辑: ?

    2.2K20

    DjangoBlog|12 博客文章删除功能(优化版)

    作者:老表 来源:简说Python 大家好,是老表,这个系列将会更新编写,项目的学习笔记,也是后面更新一个重点,希望个人博客页面可以早点和大家见面~欢迎大家点赞、留言支持。...就个人有两点原因: 1、知道这样操作肯定能实现功能,图简单; 2、删除博客,确实需要一个中转页面让用户考虑(避免误操作)。...我们不考虑个人能力问题,我们将原因合并:删除前需要提示用户正在进行删除操作,那这样想,更好解决方法是,出一个弹框即可,就是当用户点击文章详情页上删除按钮时,先弹出一个弹框提示用户是否要删除对应文章,...:弹框标题(modal-header)、主体内容(modal-body)、底部内容(odal-footer),底部我们设置了两个按钮一个是取消,一个是删除,其中删除操作是放在了Post表单里面,并设置了...,从上一节跳转页面删除,变成了弹框删除,效果如下: 删除博客弹框模式演示 踩坑 替换成Bootstrap弹框模块Live demo后,点击删除按钮无法弹出弹框?

    76620

    使用 postman 进行接口测试

    postman 返回是 HTML 源码,在这个 Flask 程序中,所有接口返回都是同一个模板文件,HTML 源码是一样,对比不出效果。...在响应数据栏上方,有一个 Preview 按钮,就是大部分软件都有的“预览”功能,点击 Preview 按钮,就会看到跟浏览器页面一样效果。...添加数据 在实现接口中,查询所有,指定查询和添加数据接口是同一个,都是根路由 / ,将请求方式改成 POST ,url 继续填 http://127.0.0.1:5000/ 。...后端接口是从前端 form 表单中获取数据,所以要使用 form 表单添加数据发送给后端。...确认填写无误后,点击 Send 按钮即可发送请求,获取响应,返回还是 HTML 文件。 ? 点击 Preview 预览,现在已经多了添加数据,添加成功。 ? 3.

    2.2K20

    Laravel5.3+框架定义API路径取消CSRF保护方法详解

    Laravel官网文档中写到:/p Any HTML forms pointing to POST, PUT, or DELETE routes that are defined in the web...所以,请注意你页面的表单中是否使用了POST、PUT或DELETE方法,如果有,并且你没有在表单添加相应CSRF token时,你请求将会失败。 有时候,我们可能不想要CSRF保护。...比如我们想使用第三方软件测试表单提交,或者比如微信公众号接口开发时,当微信服务器使用POST推送给我们消息时,如果开启了CSRF保护,那么请求肯定是失败。...在这样情况,我们可以使用API路径来取消CSRF保护。 我们有两种办法来定义API Routes。...本文主要讲解了Laravel框架定义API路径取消CSRF保护操作方法,更多关于Laravel框架使用技巧请查看下面的相关链接

    97340

    快速掌握接口测试利器Postman

    下面简单示例get和post使用 最常用请求方法有GET,POST,PUT和DELETE,它们区别如下: GET请求:用于查询获取数据。...Postman代码片段功能已经把常见断言代码示例已经给我们写好了,大家直接可以选择使用。 ?...如果想将自己集合分享给团队内其他人,可以点击Share按钮进行分享。 1.创建测试集:在左侧面板点击New collections按钮。 ?...点击右上角眼睛按钮,点击Add,输入环境名称,以及环境参数和参数值。点击Edit添加全局变量名和变量值。 添加环境名称,以及具体参数名和参数值。 添加全局变量,输入变量名和变量值。 ?...生成python代码 postman完成请求后,可以请求生成各种语言和框架代码片段。 点击请求面板code按钮,选择需要转换语言。 ? 默认是http模式 ? ?

    83341

    VFP缓冲表与表单操作相互配合,新手小白必看

    界面设计 如图所示 操作界面设计 我们来细分一操作: 添加空行 编辑空行 删除空行 撤消录入 保存录入 数据操作模式 添加空行->撤消 不留痕迹 删除行->撤消 还原删除行 修改行->撤消 还原编辑行...添加空行->保存  删除行->保存  修改行->保存 实际上用户操作是有一个中间状态,可以保存或者撤消,称为缓冲 为了达到可以保存和撤消效果,我们使用VFP缓冲。...正式开发 表单设置 首先将表单opcode设为2-编辑模式 表格控件设为教师表 添加四个控件 添加,删明细,保存,撤消 表单Load事件 *--一般在LOAD事件中准备好表单所需要数据 SET MULTILOCKS...BLANK thisform.Refresh() 删明细按钮click事件 SELECT 教师 DELETE thisform.Refresh() 撤消按钮click事件 Select 教师 Tablerevert...Thisform.Refresh() 运行效果 运行效果 按钮和表格控件状态切换 刚刚效果是让用户直接上手就可以操作,如果一开始就不让用户编辑,需要用户按一个按钮方可以编辑,防止误操作呢?

    94310

    3分钟短文:十年窖藏,Laravel告诉你表单验证“正确姿势”

    [img] 本文教你正确地验证用户表单提交数据,那就是十余年坚定好用Laravel验证器。...用户输入从来都不能直接拿来用,要做一个关卡,层层把关,有效数据放进去,无效数据挡在门外。...重要是那些验证规则,来逐一为你解读。验证规则内使用都是laravel内置写好了规则,拿来即用。...为了检查是不是表单验证生效了,你可以直接在空白表单,点击“提交”按钮,输出内容大致如下: [pic] 红色警告部分,就是视图模板文件里 $errors 发挥作用了。...自定义错误提示信息 错误提示信息,是laravel内置验证规则给定,如果你觉得提示信息不够详尽,不太满意,自己写也是没问题把上面的验证规则重写一

    1.7K30

    laravelcsrf token 了解及使用

    之前在项目中因为没有弄清楚csrf token使用,导致发请求的话,一直请求失败,今天就一起来看一csrf一些东西。  ...2.从字面意思就可以理解:当你访问 fuck.com 黑客页面的时候,页面上放了一个按钮或者一个表单,URL/action 为 http://you.com/delete-myself,这样引导或迫使甚至伪造用户触发按钮表单...注:本文从laravelcsrf token开始到此参考:http://blog.csdn.net/proud2005/article/details/49995389 关于  laravel csrf...保护更多内容请参考 laravel学院文档:http://laravelacademy.org/post/6742.html 下面说说我们那个项目中关于csrf token使用: 在另一篇文章中也提到了我们那个项目中使用过程...本人对laravel原理还不太了解,上面的内容如果有什么错误的话,欢迎指教。

    3.8K20

    利用PHPStorm如何开发Laravel应用详解

    前言 相信有很多PHP程序员使用 [laravel] 创建他们应用程序。[laravel] 是一个免费开源PHP web应用程序框架。...安装Laravel IDE 助手 官方方式 首先确认 Composer 在我们项目中是可用, 我们可以使用 Composer | Add dependency… 右键菜单安装 [Laravel 5...[译注]自助方式 因为我们是在项目中使用, 所以我们在项目中添加这个功能, 在 composer.json 中添加 require-dev 分支 laravel 4. , 这里版本应该填写 1...."b/【关于环境方面,觉得DOCKER是非常合适和快速部署一个方式】/arryvdh/laravel-ide-helper": "2.*" // ... }, 然后使用命令 composer update...在 Settings (Preferences) | Plugins, 点击 Browse repositories… 按钮并搜索Laravel.

    1.7K20

    推荐超好用 6 款 Laravel Admin 管理模版

    图片 CRUD Laravel 框架遵循 MVC(模型-视图-控制器)模式,提供 CRUD 接口是 Laravel Admin 模板一种流行架构方法。...这些是视图和控制器集合,可以自动添加 CRUD 逻辑和 UI 到现有的模型中。这种结构提供了一种快速获得模块化管理后台方法,它可以轻松地添加一个应用程序中,或改装到一个现有的应用程序中。...它不仅有一个菜单生成器,允许您管理网站菜单,还有一个数据库管理器,允许您添加、编辑和删除表格。Voyager 是围绕 BREAD 功能构建,您可以指示任何表浏览、读取、编辑、添加和删除功能。...出于这个原因,认为这个产品最适合那些想自己编写后端逻辑,且主要想在视图层得到帮助项目。...它提供了 100 多个 UI 组件, 从按钮表单输入到图表和图片轮播。 购买 Argon 时,您可以决定要为哪个前端库编写交互方面的内容,包括 jQuery、React、Vue 和 Svelte。

    7.7K41

    大厂都在用管理型网关解密:Fizz管理后台使用教程

    点击 添加插件 按钮为路由添加插件,如图所示。 [manager_api_auth_add_3.png] 配置插件路由级别的自定义配置,表单界面来自于插件表单定义,更多详情请查看插件管理功能介绍。...勾选想要打开调试模式接口,点击 打开调试模式 按钮弹出确认窗口,如图所示。 [manager_aggregate_debug_mode_1.png] 点击 确定 按钮确认打开调试模式。...[manager_aggregate_debug_mode_2.png] 勾选想要关闭调试模式接口,点击 关闭调试模式 按钮弹出确认窗口,如图所示。...[manager_aggregate_debug_mode_3.png] 点击 确定 按钮确认关闭调试模式。...[manager_aggregate_delete_1.png] [manager_aggregate_delete_2.png] 点击 确定 按钮后删除接口,处于已发布状态接口无法删除,需要下线后才能操作删除

    2.1K51
    领券