Javascript 禁用提交时的单击按钮

我尝试用纯js（使用Bootstrap5）更新这个jquery脚本。目标是不允许有人点击两次付款按钮。对不起，我的js不是很强。 我的目标是获得与jquery脚本相同的反应

我试图遵循本页上的流程：

多谢各位

我当前的脚本

<form name="checkout_confirmation" action="http://............/Process" method="post" id="checkout_confirmation" role="form" onsubmit="return checkCheckBox(this)"><section class="checkout_confirmation" id="checkout_confirmation">
div class="text-end" id="process_button" class="processButton">
<button type="submit" data-button="payNow" class="btn btn-success">Confirmer la commande avec paiement</button>    </div>
  </div>
</form>



<script>
  $('form[name="checkout_confirmation"]').submit(function() {
    $('form[name="checkout_confirmation"] button[data-button="payNow"]').html('Confirm the payment').prop('disabled', true);
  });
</script>

div class=“text end”id=“进程按钮”class=“进程按钮”>
执行命令的确认人
$（'form[name=“checkout\u confirmation”]'）。提交（函数（）{
$（'form[name=“checkout_confirmation”]button[data button=“payNow”]”）.html（'confirmation the payment'）.prop（'disabled'，true）；
});

现在，脚本将更新

<script>
    var button = document.getElementById('checkout_confirmation');

    button.addEventListener('submit', function() {
        alert('Confirm the payment');
    });

    button.disabled = false;
    button.click(); // No output
    button.prop("disabled", true);
</script>

var button=document.getElementById（'checkout_confirmation'）；
addEventListener（'submit'，function（）{
警报（“确认付款”）；
});
button.disabled=false；
按钮。单击（）；//无输出
按钮。道具（“禁用”，真）；

您有两个问题：

• 提交事件在表单元素而不是按钮元素上触发

• getElementById

  通过元素的id获取元素，并且按钮和表单都没有id（请参阅）

可以在JavaScript中使用将按钮的

属性设置为
已禁用

Element.setAttribute("disabled", true);

这可用于禁用按钮

因此，当有人单击提交按钮时，您可以
禁用该按钮，直到数据处理完毕

检查以下演示代码：


const btn=document.getElementById（“提交数据”）；
btn.addEventListener（“单击”，提交表单）；
函数submitForm（）{
btn.setAttribute（“禁用”，真）；
btn.innerText=“提交…”；
让userName=document.getElementById（“用户名”）.value；
日志（“名称：”，用户名）；
设置超时（（）=>{
btn.删除属性（“禁用”）；
btn.innerText=“提交”；
}, 3000);
}

全名




提交
是否可以使用e.preventDefault（）停止按下按钮的默认行为

更多信息可在此阅读：
payNow
不是按钮的ID，而是
数据-
属性值我通过签出确认更改payNow，但当我到达页面时，会出现一个弹出窗口，这是我不想要的。（脚本更新）如果您不想执行单击按钮将执行的操作，为什么要以编程方式单击按钮？