javascript - jQuery/Bootstrap3 : Disable/hide button after submit

Question

我是 javascript 新手，但我对此进行了广泛的搜索并尝试了数十种不同的替代方案。他们中的大多数人什么也没做，还有一些人阻止了表单的提交!

我有以下表格:

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button>
</form>

我想通过禁用 submit 来防止重复提交提交后按钮或使其消失，以效果最佳者为准。

我尝试了多种 JS 方法，但我什至不知道哪一种最好，所以我不会在这里提供一种以避免混淆。

如果您能为我提供完整的 javascript <script>，我将不胜感激。片段以及我最终需要的任何其他内容。我不想在这里使用 Ajax，但请告诉我这是否有帮助。

非常感谢!

Answer 1

您可以使用 jQuery 来实现此目的。

$('form[name="buy"]').on('submit', function() {
    $('#submit').prop('disabled', true);
});

提交表单后，这将禁用提交按钮。

<小时/>

正如 @rolodex 所指出的，提交表单将刷新页面，因此禁用的按钮将再次启用。如果不使用 Ajax，我会这样做(如 @rolodex 的答案):

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button>
</form>

因此，一旦有人提交了表单，该按钮就会被禁用。这并不能阻止有人在没有表单数据的情况下再次刷新页面，但使用 Ajax 也不能阻止。解决这个问题的唯一方法是使用 cookie。