表单提交后禁用按钮

Question

如何更改此功能，以便在我提交表单时禁用按钮并刷新页面？

function thanks() {
  setTimeout(function () {
    document.location.pathname = "index.php";
  }, 3000);
}

页面刷新功能正在起作用。 我只需要禁用按钮。

这是我的表格

<form  method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="hidden" name="price" value="{{$theme->price}}">
  <input type="hidden" name="id" value="{{$theme->id}}">
  <button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>

编辑

问题是，每当我禁用该按钮时，文件都不会开始下载。为什么？

Answer 1

使用禁用的属性，如下所示：

 document.getElementById("<button id>").disabled = true;

Answer 2

尝试使其成为一个不引人注目的脚本：

<form  method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="hidden" name="price" value="{{$theme->price}}">
  <input type="hidden" name="id" value="{{$theme->id}}">
  <button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>

在jQuery中：

$("#myForm").submit(function (e) {
  // do not allow to submit form
  e.preventDefault();
  // disable the submit button
  $(".btn.btn-success").prop("disabled", true);
  // do the set time out
  setTimeout(function () {
    document.location.pathname = "index.php";
  }, 3000);
});

Answer 3

单击按钮时，将此按钮的disabled属性设置为true

的HTML

<button type="submit" class="btn btn-success" onclick="thanks(this)">

jQuery的

function thanks(elem) {
    $(elem).prop('disabled', 'disabled');
    setTimeout(function () {
        document.location.pathname = "index.php";
    }, 3000);
}