Question

我有一个提交按钮的网页。我的提交按钮如下所示：

<button type="submit" class="btn btn-primary wait-on-click">
  <span>Submit</span>
</button>

当用户点击提交按钮时，我想要禁用该按钮并让用户知道发生了什么。为此，我有以下JavaScript：

$('.wait-on-click').click(function(e) {
  e.preventDefault();
  $(this).prop('disabled', true);
  $('span', this).text('Please wait...');
});

按钮禁用。文本已更新。但是，提交实际上并未提交给服务器。如果我注释掉我的JavaScript函数的主体，它可以正常工作。我不明白如何解决这个问题。

谢谢！

Answer 1

我相信你的问题在于这一行

 e.preventDefault();

这会阻止提交按钮的默认行为，即提交！因此，将其删除。

<强>更新

经过测试，我发现了问题。我相信你的问题在于这一行

$(this).prop('disabled', true);

出于某种原因，这阻止了表单的提交。因此，将它放在提交处理程序中。

＆＃13;

$('.wait-on-click').click(function(e) {
  $('span', this).text('Please wait...');
});

$('form').on('submit', function() {
  $('.wait-on-click').prop('disabled', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
  <input name="n" />
  <button type="submit" class="btn btn-primary wait-on-click">
    <span>Submit</span>
  </button>
</form>

＆＃13;

使用jQuery单击“允许按钮提交”

1 个答案: