gpt4 book ai didi

javascript - 禁用引导按钮不适用于提交?

转载 作者:行者123 更新时间:2023-11-28 05:58:25 27 4
gpt4 key购买 nike

我有一个基本的“联系我们”表单,要求提供一些基本信息,并在底部有一个提交按钮。当用户单击“提交”时,表单将提交给自身并验证字段。如果没有错误,则会调用一个例程来生成电子邮件。

我希望禁用该按钮,并在用户单击该按钮时将标签更改为“正在发送...”。

我能够使用 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'>&nbsp;Please wait...</div>

效果很好并且易于测试。

最后注意:当我在引导按钮运行时单击它后,将鼠标悬停在引导按钮上时,我确实看到了禁用的光标,只是样式没有改变?所以它实际上必须被禁用,但看起来并不被禁用。奇怪。

最佳答案

从这个代码示例中并不完全清楚,但我的猜测是您正在提交表单并导致屏幕刷新,从而立即重新加载页面。换句话说,JS 正在正确执行,但立即被覆盖。

如果您正在构建客户端验证并从客户端通过电子邮件发送表单,则不应将逻辑附加到按钮上的单击事件,而应将逻辑附加到表单上的提交事件,并调用 PreventDefault在事件回调中阻止浏览器的默认表单处理。有关 jQuery 中的文档和示例,请参阅 .submit()文档。

关于javascript - 禁用引导按钮不适用于提交?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37469752/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com