提交表单时正确禁用“提交”按钮的方法

Question

我正在使用以下方法在表单开始提交后立即禁用表单中的Submit按钮。 （我之所以需要这样做，是因为如果提供的电子邮件地址不正确，服务器端脚本会调用使其延迟几秒钟。）

大约是HTML：

<form method="POST" action="contact.php">
<input type="email" name="email" id="idEmail" maxlength="256" autocorrect="off" autocapitalize="off" />
<input type="submit" value="Send" onclick="return onSubmitDisable(this);" />
</form>

，然后在JavaScript中：

function onSubmitDisable(obj)
{
    obj.form.submit();
    obj.value = "Sending...";
    obj.disabled = 'disabled';
    return true;
}

除了我刚刚在Firefox中遇到问题外，这种方法还可以。让我给你一些步骤：

如果您通过在电子邮件地址字段中添加最后一个空格来填写表格：

然后按键盘上的Enter，Firefox将调用我的onSubmitDisable函数：

但是我认为，由于Firefox的表单验证会尝试在电子邮件表单UI中显示错误，因此提交过程会失败：

{{3}}

但是form.submit()要么什么都不做，要么失败。它似乎并没有引发异常。

因此，在这种情况下，我的表单将通过禁用的Submit按钮无限期地挂起。

那我在做什么错了？

Answer 1

1. 将input type="submit"更改为input type="button"，以便Submit按钮将首先运行该功能，而不是直接尝试提交表单。另外，请确保将name属性值和id属性值submit更改为其他内容，例如submitBtn或submitForm，以便您可以手动运行稍后从submit()函数onSubmitDisable()内部使用++方法。

2. 您需要在表单中添加一个名称属性，其名称为"myForm"，以便以后在提交时可以引用它。

3. 此外，当您要将“发送”文本更改为“发送”时，当前函数未正确引用value属性。您需要将obj.value替换为obj.target.value。另外，obj.disabled是布尔值，因此，当单击发送按钮时，需要将其分配给true。

4. 最后，您需要将submit()方法移到最后，以便在将“发送”更改为“发送”并禁用按钮之后，该方法将最后运行。确保确保引用表单的名称，例如myForm.submit();这样的Submit方法中的“ myForm”。

++ 我们必须更改您的提交按钮的名称和id属性，以便form.submit()将引用submit() 方法，而不是在验证功能中提交按钮 element 。这就是为什么您的submit()无法正常工作的原因。

---

运行以下代码段或查看此JSFiddle，以获得提交按钮将文本从“发送”更改为“发送”并在如上所述发送表单时将其禁用的实际示例：

function onSubmitDisable(obj) {
    obj.target.value = "Sending...";
    obj.disabled = true;
    myForm.submit();
    return true;
}

document.querySelector("input[name='submitBtn']").addEventListener("click", function(e) {
  onSubmitDisable(e);
});

<form method="POST" name="myForm" action="contact.php">
<input type="email" name="email" id="idEmail" maxlength="256" autocorrect="off" autocapitalize="off" />
<input type="button" name="submitBtn" value="Send" />
</form>

---

来源：JavaScript form validation function is not working

Answer 2

您不能通过onsubmit禁用按钮吗？

似乎更直观的恕我直言。

[edit]添加了调试器，因此您可以看到该按钮已禁用。

function disableSendButton(formElement)
{
  let submitBtn = formElement.lastElementChild;
  submitBtn.value = "Sending...";
  submitBtn.disabled = true;
debugger
}

<form method="POST" onsubmit="disableSendButton(this)" action="contact.php">
  <input type="email" name="email" id="idEmail" maxlength="256" autocorrect="off" autocapitalize="off" />
  <input type="submit" value="Send"/>
</form>

Answer 3

好。我想我明白了。简单明了，无需拖入任何库。只是原始的JavaScript。

对于HTML：

<form method="POST" id="idForm" action="contact.php">
<input type="submit" value="Send" id="idBtnSend" />
</form>

以下是禁用Submit按钮的JavaScript。在最新的Chrome，FF，Edge和Safari（在iOS中）中均可使用：

var objForm = document.getElementById('idForm');
objForm.addEventListener('submit', function (e)
{
    var objBtn = document.getElementById('idBtnSend');
    objBtn.value = "Sending...";
    objBtn.disabled = 'disabled';
}
);  // ok, I forgot to copy this last line in my original posting

Answer 4

您的解决方案似乎无效！

var objForm = document.getElementById('idForm');
console.log(objForm);
objForm.addEventListener('submit', function (e)
{
    var objBtn = document.getElementById('idBtnSend');
    objBtn.value = "Sending...";
    objBtn.disabled = 'disabled';
   
})

<form method="POST" id="idForm" action="contact.php">
<input type="submit" value="Send" id="idBtnSend" />
</form>

Answer 5

如果使用jquery，则非常简单。摆脱onclick事件，向表单添加一个ID并使用以下命令：

$("#myform").submit(function(e){
    e.preventDefault();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="contact.php" id='myform'>
<input type="email" name="email" id="idEmail" maxlength="256" autocorrect="off" autocapitalize="off" />
<input type="submit" value="Send"  />
</form>