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

您可以尝试以下代码 Event

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（）来设置诸如“已禁用”之类的属性（请参阅http://api.jquery.com/attr/）。

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

2 个答案: