Wordpress Ajax表单提交2个提交按钮(保存和删除)如何让第二个按钮工作 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

不写一行代码，如何实现前端数据发送到邮箱？

经常在很多网站上都能看到类似的表单信息功能，用户只需要填写相关内容，点击提交按钮，就可以将表单内容发送到管理员邮箱。...稍加思考后，就会发现，本质上就是要将点击按钮和发送邮件功能进行绑定，那么有没有什么简单的方法呢？...“后端”的操作，来将前后按钮和发送邮件功能进行绑定。...（可选）使用 Ajax 虽然我们的需求已经实现，但是在刚刚点完发送之后，会跳转到一个新的页面为了页面不修改，我们需要使用AJAX提交表单，首先需要从下面的链接中下载对应的js文件到项目目录 https... 当然你也可以使用CSS、JS来让你的表单更加酷炫，但这不是本文要讨论的主要内容。

6.8K3 0

WordPress 后台样式：Button 按钮

上一篇讲了 WordPress 后台样式： Admin Notice 操作提示，今天继续，讲讲 WordPress 后台常用的按钮样式： WordPress 常用到按钮是表单的提交按钮，我们非常简单的使用...> 第一个参数代表 $text 代表按钮的文本，默认是“保存更改”。...第二个参数 $type 是按钮的 CSS class，包含 'primary'，'small' 和 'large'，默认是 'primary'，根据这个值的不同显示不同的样式。...第三个参数 name 是提交按钮的 input name，默认是“submit”，如果没有在 other_attributes 参数中提供 id 属性，那么第四个参数 $wrap 代表生成按钮是否会包含在...所以只要掌握好这几个 class，在 WordPress 后台根据自己的需求可以做出各种按钮。

2.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

WordPress评论滑动拉链解锁myQaptcha修改为自动提交的方法

原理很简单：先用 css 隐藏评论提交按钮，然后将评论提交动作绑定到滑动解锁上即可。好吧，张戈好人做到底，整理一下详细的做法（发现很多朋友都喜欢看张戈罗里吧嗦。。。）...一、下载代码为了省去如何修改代码洋洋洒洒的几百字，张戈决定直接将修改好的代码打包分享出来：下载地址下载解压后，将得到的 myqaptcha 文件夹整体上传到 WordPress 主题目录下备用。...php 之后添加如下代码保存即可： include("myqaptcha/myQaptcha.php"); 三、修改代码 ①、评论框为了配合这个自动提交，我们必须修改一下评论框的提交按钮代码。...②、ajax 代码可以看出来，张戈博客这个滑动自动提交和 Ajax 评论提交是绝配。如果你博客的评论不是 ajax 模式（即点击提交评论页面会刷新），那么 ajax 代码这一步就不用做啦！...③、不动脑筋自动提交的原理很简单，说白了就是将原有的提交按钮用 css 样式隐藏掉，然后在滑动动作绑定一个点击隐藏的提交按钮的机制，这样用户滑动模块，就会自动点击那个隐藏的提交按钮了，从而实现自动提交

1.7K5 0

如何用WordPress表单插件制作联系表单？

今天咱们来聊聊WordPress表单插件制作联系表单的事。这事儿说难不难，说简单也不简单。但别急，跟着我一步步来，保证你轻松上手，做出个漂亮的联系表单！首先，你得先有个WordPress网站。...你也可以自定义CSS，让你的表单看起来更漂亮。设置好样式后，别忘了给表单添加一个提交按钮。在表单代码里，加上【submit】标签，然后输入按钮文字，比如“发送消息”。...这样，用户点击按钮后，表单就会提交。接下来，咱们得设置一下表单提交后的处理方式。在“Contact Form 7”插件中，有一个“Mail”选项。这里你可以设置收件人邮箱、邮件主题、邮件内容等。...设置好邮件内容后，别忘了保存表单。然后，在WordPress后台，找到“Shortcode”选项，复制生成的短代码。接着，在文章或页面中粘贴这个短代码，你的联系表单就出现了！...最后，别忘了测试一下你的表单。登录你的网站，填写表单，看看是否能正常提交。如果一切顺利，恭喜你，你的联系表单制作完成了！总结一下，制作WordPress联系表单的步骤如下：1.

1881 0

JavaWeb防止表单重复提交的几种方式

一、表单重复提交的常见应用场景网络延迟的情况下用户多次点击submit按钮导致表单重复提交用户提交表单后，点击【刷新】按钮导致表单重复提交（点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交...= true; //提交表单后，将表单是否已经提交标识设置为true return true; //返回true让表单正常提交 } else { return false; //返回false..."; //返回true让表单可以正常提交 return true; } （3）、验证码页面上添加验证码，不管验证输入正确与否，提交后均刷新验证码。...（4）、ajax提交加锁采用ajax方式提交表单时，设置一个布尔变量（true/false），当然其他类型变量也可以。...（5）、提交后重定向到一个提交成功的页面表单提交后跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交，浏览器也不会出现表单重复提交的警告，以及消除按浏览器前进和后退按导致的同样问题。

3.3K2 0

SpringBootRestFul快速入门

CustomerController.java 添加 /** * ajax操作：保存客户信息 * @param customer */ @PostMapping...",true)); } add.jsp //1、页面加载完成时，为保存按钮绑定点击事件 $("#saveBtn").click(function () { //2、点击事件中，发送...ajax请求到控制器，提交整个表单数据 $.ajax({ type:"post", url:"${pageContext.request.contextPath}/customer...; } } }); }); edit.jsp //2、页面加载完成时，为修改按钮绑定点击事件，点击按钮，ajax方式提交表单 $("#modifyBtn").click...{ //通过ajax，向控制器发送请求，请求删除该客户信息 $.ajax({ type:"delete", url:"${pageContext.request.contextPath

8781 0

实战分析表单form中禁止自动提交

，找了很久，之后查找资料，知道表单form提交除了submit提交还有button也会提交，所以总结如何处理不然button 提交表单，在本文中，我们将讨论网页表单（form）中提交的两种方式。...这意味着当用户点击按钮时，表单不会执行提交操作。这种方法适用于需要在点击按钮后执行其他操作（如AJAX请求）的情况。...默认情况下，元素的类型为submit，这意味着当用户点击按钮时，表单将执行提交操作。通过将元素的type属性设置为button，我们可以阻止按钮的默认提交行为。... 总结当需要在点击按钮后执行其他操作（如AJAX...当不需要执行表单提交，只需要执行其他操作（如JavaScript事件处理）时，可以将元素的type属性设置为button以阻止按钮的默认提交行为。

1.4K0 0

WPJAM Basic 5.9 详细更新说明

首先还是自己去 Debug，我之前提供了详细的 WordPress 如何 debug 的教程，你参考处理，如果处理不了，提供 log，直接在本公众号留言，我看到，如果信息完备，然后感觉是 WPJAM...兼容 WooCommerce 之前后台文章列表开启「支持全面的 AJAX操作」，会让 WooCommerce 的订单和优惠券页面出现一些问题，最近接了一些 WooCommerce 的项目，仔细研究和处理了一下...数据按钮支持多个按钮 WPJAM_List_Table 和 WPJAM_Page_Action 的提交按钮支持多个按钮，比如我最新的小程序插件的「路径和二维码」的弹窗：这样，我就把原来的「生成二维码...」和「提交到微信搜索」的按钮合二为一，文章列表页面更加简洁，我只需要保留批量操作里面的「提交到微信搜索」即可。...Safari 浏览器不是提交按钮不能获取焦点而 document.activeElement 不是当前按钮的处理。

8.9K3 0

表单脚本

虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。...提交表单（1）提交按钮提交方式1：通用提交按钮方式2：自定义提交按钮表单没有提交按钮，安回车键不会提交表单。注意，通过上述方式提交表单，浏览器会在将请求发送给服务器之前触发submit事件。这样就可以决定是否需要验证表单。...（2）利用onsubmit事件处理程序取消后续的表单提交方式。我们项目中，请求通过ajax提交，防重复提交的方式大致类似于上述第（2）种。...对表单字段的名称和值进行URL编码，使用“&”分隔；不发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type为“reset”和“button”的按钮；选择框中每个选中的值单独条目发送

6.4K4 1

JSP 防止网页刷新重复提交数据

网页如何防止刷新重复提交与如何防止后退的解决方法提交后禁用提交按钮（大部分人都是这样做的）如果客户提交后,按F5刷新怎么办?...因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！），然后再次编辑并提交表单向数据库插入新的记录。这是我们不愿看到的。 ...那么，在那个我们不想让用户返回的页面是否也可以加入JavaScript代码呢？在这个页面中加入的JavaScript代码可用来产生点击前进按钮的效果，这样也就抵消了用户点击后退按钮所产生的动作。...，在写完第一个页面后跳到第二个页面，为了防止用户用后退返回到第一个页面，再重新提交第一个页面，我是当用户提交第一次提交第一个页面时，把插入数据库中的记录的自增长id号放到session里，当用户从第二个页面返回到第一个页面再一次提交该页面时...参考推荐：网页如何防止刷新重复提交与如何防止后退的解决方法

14.3K2 0

EasyNVR前端防止提交成功后多余操作提交

回到具体问题上来，有用户反应EasyNVR前端对于表单提交这一块用户体验不是很好。主要问题是表单在提交成功以后，提交按钮依然可以触发。居然有用户提出来，我们就要尽最大可能满足用户需求。...}) 从代码中我们不难看出，EasyNVR前端页面是通过触发Ajax来进行表单提交的。...整体的流程无非这两种： 1.点击提交按钮->触发ajax提交数据->提交成功->屏蔽提交按钮防止再次提交; 2.点击提交按钮->触发ajax提交数据->提交失败->保持提交按钮状态供再次提交；...首先我们抛开提交的内容，从提交的过程来说，在EasyNVR配置表单中我们没有只需要注重ajax请求动作的成功和失败；我们主要调用的函数就是success: function、error: function...下一篇将介绍如何实现当表单内容出现变化后可以提交，表单内容不变的情况下依然屏蔽提交按钮。

1.2K1 0

【JS】741- JavaScript 闭包应用介绍

函数式编程灵活简洁，而语言对闭包的支持，让函数式编程拥有了灵魂。以实现一个可复用的确认框为例，比如在用户进行一些删除或者重要操作的时候，为了防止误操作，我们可能会通过弹窗让用户再次确认操作。...、取消按钮 // 添加确认按钮点击事件，事件函数中做dom清理工作并调用confirmCallback // 添加取消按钮点击事件，事件函数中做dom清理工作并调用cancelCallback...优雅解决按钮多次连续点击问题用户点击一个表单提交按钮，前端会向后台发送一个异步请求，请求还没返回，焦急的用户又多点了几下按钮，造成了额外的请求。...有时候多发几次请求最多只是多消耗了一些服务器资源，而另外一些情况是，表单提交本身会修改后台的数据，那多次提交就会导致意料之外的后果了。...无论是为了减少服务器资源消耗还是避免多次修改后台数据，给表单提交按钮添加点击限制是很有必要的。怎么解决呢？

1.2K3 1

富Web应用的架构与转化方法：Web应用系列第二篇

丰富的应用程序的标志之一是缺少页面重新加载和减少页面导航。例如，您在表单上输入数据，然后单击“提交”按钮。没有明显的等待响应。这是因为是使用了Ajax技术将数据传输到服务器并在后台接收响应。...工作单元可以是发票输入，其中发票输入的所有功能在一个页面上可用：创建，更新，删除和查询。我们将看到RichFaces如何能够大大降低复杂性并加速此类丰富应用程序的开发。...三、Ajax表单提交我们将看到的第一个特性，是能够提交表单数据并仅在页面的该部分调用JSF生命周期而无需重新加载页面。以下是声明注册表单的页面部分（简化以供讨论）： ?...发票输入表单周围添加了。删除了两个组件，因为页面的上半部分将与页面底部交互而不提交整个页面。 ?...探索Ajax表单提交已替换为其Ajax等效项。

5.6K2 0

WordPress记住评论用户信息的js版本，直接操作cookie无视缓存

下面分享这个 js 代码，补充 WordPress 在缓存处理方面的不足：先前置说明一下，此 js 主要用于解决 WordPress 在百度云加速等 CDN 缓存开启下无法保存用户信息的问题，省的某些人不仔细看内容就别说啥...评论，就没有 comments-ajax.js，这时你可以将以上代码保存为 saveinfo.js ，然后引入到前台即可。...下面隐藏内容是张戈之前自己写的 js 代码，使用感觉没有 ZBlog 的完善感兴趣的可以参考看看展开二、自动保存不提供是否保存信息的选项，提交评论的时候，会自动保存用户信息到本地 cookies...>/saveinfo.js"> 三、自行选择功能区别：在上述功能的基础上，新增一个勾选框，让用户选择是否保存信息。...合并； ③、已记住的网站，如需修改更新用户信息，只需输入新的信息，重新提交一次即可刷新 cookie； ④、如果评论框中存在重置（id 为 reset）的按钮，那么只要点击重置就能清除已保存的用户信息

2.1K5 0

Contact Form 7：最强大的 WordPress 联系表单插件

帮人做 WordPress 项目的时候，经常需要帮客户设置联系表单，一般我们都会推荐客户使用 Contact Form 7 这个 WordPress 插件。...Ajax 提交和 jQuery 表单插件等，并且还可以结合 Akismet 过滤垃圾邮件，同时也支持 CAPTCHA 反垃圾邮件。...Contact Form 7 安装和使用 Contact Form 7 安装非常简单，只需要在 WordPress 后台在线安装即可。...Contact Form 7 支持几乎所有的表单域元素，如：单选框、复选框、文本框、下拉菜单、按钮、文件上传等。...并且生成也非常简单，只需要点击下就可以生成一个自己所需要表单域，并且把生成的代码复制到表单和收到邮件中即可，使用非常简单，并且如果你懂英文的话，Contact Form 7 的官方站点有非常详细的文档教你怎么使用

1.5K2 0

如何在 WordPress 中创建联系表格？

网站，并且我们想要添加一个功能，让他们可以联系他们所拥有的查询。...我们可以通过使用网站上的 WordPress 插件添加联系表格来做到这一点。因此，这将为你的访问者提供一种与你联系的方式，当他们需要帮助或有什么要分享的时候。让我们看看如何创建联系表格。...通过单击默认表单的设置选项删除默认联系表单。通过单击“添加新”按钮创建一个新表单。从以下给定选项中选择联系我们选项：空白表格、联系我们、报价请求、活动注册。当你单击它时，你的表单将被创建。...将创建一个简单的联系表单，其中包含名称、电子邮件、消息和提交按钮等字段。你可以通过在Ninja Forms插件选项中选择空白表单选项来根据需要添加更多字段。...要添加表单，请单击标题下方的添加表单选项。弹出窗口将出现并选择你在 Ninja Form 中创建的表单。然后单击“插入”，表单将插入到你的页面中。点击发布按钮。

5.4K2 1

python测试开发django-162.ajax 提交表单，防重复提交（beforeSend）

前言 form 表单提交的时候，当快速点击提交按钮的时候，会触发多个请求过去，会导致重复添加。...前端页面前端form表单页面，2个输入框，一个提交按钮这里用ajax提交请求 /** 定义表单提交事件 */ function project_save...(); }) 遇到问题，当快速点提交按钮多次，会触发多个请求 beforeSend 禁用添加按钮解决办法，在点提交按钮，发请求之前，可以调用beforeSend 方法，添加一个disabled...location.href="/page/list_project/"; }else{ // 让按钮生效

1.8K1 0

求超大文件上传方案( Web )

使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交，服务端取到该文件后再进行转移、重命名等操作，因此，无法实时保存文件的已上传部分。...所以真正在项目中用，还得依靠服务端来保存这些数据。关于如何将数据存在服务端，已经前端如何取数据，我在下面会讲到。...再加上你系统还有自己的业务逻辑，所以在服务端保存已上传文件数据是非常有必要的。而且保存数据和获取数据的函数都交给你来定义，抱着插件有足够的灵活性。...为了防止用户在两次上传间隔修改了文件，我们把文件的最后修改时间也传给服务端，让服务端进行比较，若时间不对应则返回已上传大小为0，重新上传此文件。再来看后台都要做哪些工作。...用于开启了断点需传 up.cancel(1);//删除队列中的某个文件，接收一个参数，表示删除第几个文件，可传入*删除队列中的所有文件 up.disable();//使选择文件按钮失效，不接收参数 up.ennable

4.3K4 0

这样的接口幂等实现我认为最为优雅(防重复提交)

想象一下，如果你的应用在用户点击一次提交按钮后，竟然多次执行了相同的操作，这不仅可能导致数据混乱，还可能引发一系列连锁反应，最终让用户失望离去。这时，接口幂等性就显得尤为重要。...按钮禁用的工作原理当用户点击提交按钮时，通常会触发一个事件，例如表单提交或数据发送到服务器。在这个事件处理过程中，按钮会被禁用或隐藏，直到服务器返回响应或操作完成。...禁用按钮：一旦捕获到点击事件，立即禁用按钮。这可以通过设置按钮的 disabled 属性或修改按钮的样式来实现。发送请求或处理表单：在按钮被禁用的同时，开始处理表单提交或发送请求。...示例代码下面是一个简单的JavaScript示例，展示了如何在表单提交时禁用按钮：表单提交：通过 setTimeout 模拟一个表单提交过程，在实际应用中，这一部分可以替换为发送 AJAX 请求或其他异步操作。

7911 0

扒一扒使用boostrap-fileinput上传插件遇到的坑，Bootstrap-fileinput上传插件的使用详解，「建议收藏」

由于公司项目的需求，需要实现动植物名录的添加，包括姓名等信息和图片等，需要使用bootstrap-fileinput的上传插件，在提交添加界面表单数据的同时上传一张或者多张图片，并将上传的图片保存到本地磁盘中...(本文是f:盘的目录下)，在在实现的时候，不适用bootstrap-fileinput上传插件本身的上传按钮（因为本身的按钮只能上传图片），需要点击提交，将表单的其他信息和图片一起提交到后台。...实现思路：原来我的思路是不使用插件的上传按钮，而自己通过js将插件里面的多文件与表单一起提交，但是到后台只能获取到最后一个文件，我不是文件数组。...我查了很多办法好像都没办法，后来改变思路：还是自己用js触发提交表单，只是先将表单其他数据传到后台保存返回数据库id,然后通过$(‘#add_bachPic’).fileinput(‘upload’);...，通过ajax提交表单的信息，在提交成功的success响应方法中，触发图片上传的方法。

5.8K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭