Question

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

我想要禁用该按钮，并在用户点击时将标签更改为“正在发送...”。

我能够使用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();
}

有没有人知道为什么提交会将更改压缩到按钮？我希望我错过了一些明显的东西。

感谢。

跟进5/26/16 - 太平洋时间下午5:12

PRE注意：我正准备发布下面的详细跟进，当我跨浏览器对此进行测试并发现我的原始代码在Chrome，IE11和Firefox中完美无缺，但不在Safari中。我认为这实际上可能是一个引导程序和Safari兼容性问题或Safari呈现问题（不太可能）。仍然让我有一个问题需要处理，但至少证明我并不疯狂！为了证明概念，这是我原来的后续行动......

原始后续发布：

感谢您的反馈。我仍然认为这里有些可疑。

我可能没有提到的一个重要的事情是当原始页面从提交调用自身时，它只调用PHP编辑检查函数，如果它通过，则生成一个PHP函数电子邮件，最后重定向到“谢谢页面”。这里重要的是原始脚本从不向客户发布任何内容，直到重定向到感谢页面。在我对HTTP中的客户端服务器的理解中，应该将所有表单字段和元素保留在它们所处的任何状态，直到将一些新的HTML推送到客户端。

为了证明这一点，我使用之前使用的代码进行了一些测试。它本质上执行与我想要的引导代码完全相同的过程，并且完美地工作。基本上我在bootstrap类按钮下面添加了一个常规的提交按钮，并为它添加了一些“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>

效果很好，很容易测试。

最后注意：当我在工作时点击它后鼠标悬停在引导按钮上时，我确实看到了禁用的光标，只是没有样式改变？所以它实际上必须被禁用，但看起来不会被禁用。怪异。

Answer 1

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

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

Answer 2

提交页面后重新加载？如果是这样，按钮没有按下，jquery重置。您需要添加到表单域<input type = "hidden" name = "btn-state" value = " 0 " >。然后当您单击以在值状态中安装jquery并在提交表单时传输它。进一步php通过$ _GET [btn-value]检查此框并根据状态（0或1）设置按钮文本并在php中添加类"btn-disabled"

Answer 3

除非您使用它来验证表单输入，否则似乎根本不需要在这里使用js。从我可以收集到的内容，您将表单发布到自身并在php中进行验证，因此您可以使用默认表单提交行为。

使用类似的东西：

<form id ="jkform" action = "example.com/thispage" method = "post">

 // bunch of forms fields


  //--- Submit Button ---
  <div class='form-group'>
    <div class='col-sm-offset-3 col-sm-9'>
      <button type='button' id='sendButton' class='btn btn primary'>Send</button>";
    </div>";
  </div>
</form>

您似乎将F_hidden_field()函数添加到不需要的表单中，因为您可以将其作为表单上的操作和方法添加。

这样你就可以消除php中所有的js和额外的回声。如果你需要在php中生成很多东西，你可以查看模板引擎，如把手，这样可以使事情更清晰，更简单。

如果您的唯一目的是在单击时更改按钮的效果，则可以使用jquery提交功能。

禁用引导按钮不能与提交一起使用？

3 个答案: