- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个基本的“联系我们”表单,要求提供一些基本信息,并在底部有一个提交按钮。当用户单击“提交”时,表单将提交给自身并验证字段。如果没有错误,则会调用一个例程来生成电子邮件。
我希望禁用该按钮,并在用户单击该按钮时将标签更改为“正在发送...”。
我能够使用 jQuery 引导调用来更改按钮标签,然后禁用它...太棒了!但是一旦我添加表单提交,按钮的更改就不再发生?
我不确定这是代码中完成操作的顺序还是与提交相关的其他原因?以下是相关代码位(注意全部为 PHP):
<html>
<form id='jkform'>
F_hidden_field("action",$G['action']);
... // bunch of forms fields
//--- Submit Button ---
echo "<div class='form-group'>";
echo "<div class='col-sm-offset-3 col-sm-9'>";
echo "<button type='button' id='sendButton' class='btn btn-primary' autocomplete='off' data-complete-text='Sending...' onclick=\"$(this).prop('disabled',true);$(this).button('complete');J_action('send_email');\">";
echo "Send Message";
echo "</button>";
echo "</div>";
echo "</div>";
...
</form>
</html>
另外,简单提交表单的JS函数如下:
function J_action(the_action) {
document.jkform.action.value = the_action;
document.jkform.submit();
}
有人知道为什么提交会压缩按钮的更改吗?我希望我只是错过了一些明显的东西。
谢谢。
<小时/>后续 2016 年 5 月 26 日 - 下午 5:12(太平洋时间)
前注:我正要在下面发布冗长的后续内容,当我进行跨浏览器测试时,发现我的原始代码在 Chrome、IE11 和 Firefox 中完美地按原样工作,但不是 在 Safari 中。我认为这实际上可能是 Bootstrap 和 Safari 兼容性问题或 Safari 渲染问题(可能性较小)。仍然给我留下了一个问题要处理,但至少证明我没有疯!为了证明概念,这是我最初的后续行动......
<小时/>原始后续帖子:
感谢您的反馈。我还是觉得这里有些可疑。
我可能没有提到的一件重要事情是,当原始页面从提交中调用自身时,它仅调用 PHP 编辑检查函数,如果通过,则生成一个 PHP 函数电子邮件,最后重定向到“感谢页面”。这里重要的是,原始脚本永远不会向客户端发布任何内容,直到重定向到感谢页面。根据我对 HTTP 客户端服务器的理解,这应该让所有表单字段和元素保持它们所处的状态,直到一些新的 HTML 被推送到客户端。
为了证明这一点,我使用之前使用过的代码做了一些测试。它本质上执行与我想要的引导代码完全相同的过程,并且工作完美。基本上,我在引导类按钮下方添加了一个常规提交按钮,并向其添加了一些“onclick”JS 和两个新的 JS 函数。它保持禁用状态并显示我的“正在工作...”文本,直到页面重定向到感谢页面。如果这适用于常规按钮,则 Bootstrap 结构中存在一些不同,导致它在提交发生时崩溃。
实现这一点的 JavaScript 代码如下:
//--- Disables the submit button (to prevent double clicking) ---
function J_try_submit($disableField, $theAction) {
document.getElementById($disableField).disabled = true;
document.jkform.action.value = $theAction;
document.jkform.submit();
}
//--- Show "Please wait" message ---
function showWait() {
document.getElementById('waitMsg').style.display = 'block';
}
HTML 中的代码如下:
<input id='mySubmit1' type='submit' name='dummy' value='Save Changes' onclick="J_try_submit('mySubmit1','add'); showWait();" />
<div id='waitMsg' style='display: none;font-size:12px;color:#3f7799'> Please wait...</div>
效果很好并且易于测试。
最后注意:当我在引导按钮运行时单击它后,将鼠标悬停在引导按钮上时,我确实看到了禁用的光标,只是样式没有改变?所以它实际上必须被禁用,但看起来并不被禁用。奇怪。
最佳答案
从这个代码示例中并不完全清楚,但我的猜测是您正在提交表单并导致屏幕刷新,从而立即重新加载页面。换句话说,JS 正在正确执行,但立即被覆盖。
如果您正在构建客户端验证并从客户端通过电子邮件发送表单,则不应将逻辑附加到按钮上的单击事件,而应将逻辑附加到表单上的提交事件,并调用 PreventDefault在事件回调中阻止浏览器的默认表单处理。有关 jQuery 中的文档和示例,请参阅 .submit()文档。
关于javascript - 禁用引导按钮不适用于提交?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37469752/
在gdb中获取此消息。我知道它不是错误或任何东西。我也做了分页,所以那不是问题。 有什么办法可以抑制此消息? 最佳答案 我很好奇看到这个问题没有得到解决... 我获得了GDB manual,它说(部分
好吧,这很烦人,而且可能很简单。我想用禁用的复选框启动我的网页,并在选择列表框中的特定行后启用这些框。所以我把它放在 onload 方法中 onload = function () { for
看来我需要以某种方式在我的 php 页面上禁用 IPv6,但我不确定该怎么做。我想我必须在我的 INI 文件中的某处添加 --disable-ipv6 ……虽然这看起来不像正确的语法。 我正在尝试解决
我有这两个代码: 第一个是禁用复制粘贴的宏: Sub Desable_Copy() Dim oCtrl As Office.CommandBarControl For Each oCt
在下面的代码中,我想, 如果我选择/单击“患者类型”按钮。它们在菜单“xmenumain”“儿科心电图”项中应该被禁用(它应该列在菜单列表中,但颜色为淡灰色)。我如何实现它? void MyMenu:
我目前在 Coordinator 布局中有一个底部导航栏,我向其添加了 HideBottomViewOnScrollBehaviour。有些屏幕需要隐藏导航栏,我可以通过从 BottomNavigat
我需要一些关于 jquery if 条件的帮助。我已经搜索和测试了几个小时,任何帮助都会很棒!我得到这个 HTML 代码: Value: No Match Test Test 2 Test 3
我正在开发 Delphi -7 中的自定义组件我有一些published特性 private { Private declarations } FFolderzip ,Fi
尝试学习菜单处理的基础知识。我的测试应用程序的菜单栏有 3 个菜单——即“TestApp”、“File”和“Help”。我发现我可以完全删除这些菜单,只需调用 say: NSMenu* rootMen
我以编程方式创建一个 NSMenuItem,但它被禁用。如果我重写 validateMenuItem: 方法并为所有项目返回 YES,则菜单项工作正常。 当我告诉菜单 autoEnableItems
我的 Web 表单中有一个 asp 按钮 (runat="server") 进入更新面板。 当我点击这个按钮时,它会执行一些操作。 Private Sub ButtonDoI
我目前正在为 video.js 构建一个插件,它可以在某些断点处将覆盖层呈现在屏幕上。但是,在不启动视频的情况下,我无法单击任何叠加层。我认为我需要禁用播放器上的点击播放功能。 我应该如何禁用/启用
设置剑道网格 selectable: "row", navigatable: true, 允许选择列标题单元格并通过键盘切换其排序状态。如何完全禁用使用键盘选择列标题单元格的功能? 最
我不想卸载code rush。我只是想在不需要的时候有机会将其关闭。 这可能吗? (快速版本)... 最佳答案 首先您应该打开“DevExpress”菜单。默认情况下,它在 CodeRush Xpre
设置: 我正在使用 TinyMCE 的 Angular 包装器来允许我的用户构建自己的电子邮件模板。这些电子邮件会发送给每个用户组织内的多个人员。我创建了自定义工具栏按钮来插入小文本 block [[
我希望下拉菜单在悬停时打开,前提是窗口大于 767 像素。我试图在页面加载和窗口调整大小时调用一个函数,并使用宽度大小条件。 enableHover() 函数仅适用于页面加载,不适用于窗口调整大小。
由于我遇到了一些问题,我正在 .NET Framework 4 中尝试连接池。使用 SQL Profiler,我可以看到每次从连接池中获取连接时,都会执行存储过程 sp_reset_connectio
我避免在我的 swift 代码中收到警告。然而,当谈到 Storyboard要求时,这对我来说有点困难。 所以现在我只想禁用 xcode 显示有关 Storyboard问题的警告。 我尝试了以下方法但
我不是 JavaScript 专家,我目前正在尝试为表单创建一个函数,该函数根据上一页上选择的数字重复相同的字段。 表单字段可能有 1 到 10 行,每行都有一个单选按钮选择,可启用/禁用每一行。 目
我正在尝试使用 CPU2006 运行各种基准测试,以查看各种优化在 gcc 速度方面的作用。我熟悉 -O1、-O2 和 -O3,但听说 -msse 是一个不错的优化。 -msse 到底是什么?我还看到
我是一名优秀的程序员,十分优秀!