Question

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

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

页面刷新功能正在运行btw。我只需要禁用按钮。

这是我的表格

<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

使用这样的disabled属性：

 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);
}

表单提交后禁用按钮

3 个答案: