禁用提交按钮后表单未提交

Question

我有一个带有提交按钮的 HTML 表单。我希望此按钮在单击时被禁用。但我也希望提交表单。

我没有使用 ajax 请求来提交表单。处理表单的 PHP 脚本需要很长时间。所以一些用户在几秒钟后点击它，表单被提交两次，这导致数据库中有两行具有相同的数据。

这是我到目前为止尝试过的方法

<form method="POST" action="xyz.php">
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>

提交按钮上的 onclick 事件禁用了按钮，但它也不允许提交表单。但是我想要提交表单，还想要禁用按钮。

Answer 1

你可以试试下面的代码 onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"

Answer 2

如果您使用的是 jQuery，那么这里有一个完全 jQuery、不显眼的处理版本，可以使用。

如果您要为您的表单提供一个 ID，您可以让它专门处理该表单 - 此示例将处理您页面上的所有表单。

$(function() {
  $("form").submit(function(event) {
    $(this).find('input[type="submit"]').prop("disabled", true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="text" name="fields[]" />
  <input type="submit" value="Submit" />
</form>

请注意，您应该使用 .prop() 而不是 .attr() 来设置 "disabled" 等属性（参见 http://api.jquery.com/attr/）。

禁用提交按钮后表单未提交

Form not submitting after disabling submit button

html

javascript

forms

jquery

jquery-events