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

Question

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

这里是大约HTML：

checkdnsrr($email, 'MX');

然后使用JavaScript：

<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>

这种方法行得通，只是我刚刚在Firefox中遇到问题。让我给你一些步骤：

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

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

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

onSubmitDisable

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

但是将不执行任何操作，否则将失败。它似乎并没有引发异常。

因此，在这种情况下，我的表单将被禁用的form.submit()按钮无限期地挂起。

所以我在这里做错了什么？

Answer 1

如果使用jquery，这真的很简单。摆脱onclick事件，向表单添加一个ID并使用以下命令：

Submit

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

Answer 2

将

<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>

更改为input type="submit"，以便“提交”按钮将首先运行该功能，而不是直接尝试提交表单。另外，请确保将input type="button"属性值和name属性值id更改为其他值，例如submit或submitBtn，以便以后可以从[ C0]函数++。

并且您需要在表单中添加一个名称属性，其值应为submitForm，以便以后在提交时可以引用它。

而且，当您要将“发送”文本更改为“发送”时，当前函数未正确引用submit()属性。您需要将onSubmitDisable()替换为"myForm"。另外，obj.disabled是一个布尔值，因此，当单击发送按钮时，需要将其分配给value。

最后，您需要将obj.value方法移至最后，以便在将“发送”更改为“发送”并禁用按钮之后，该方法将最后运行。确保确保引用表单的名称，例如obj.target.value，这是您的Submit方法中的“ myForm”。

++ 我们必须更改提交按钮的名称和id属性，以便true将引用验证功能中的submit() 方法

而不是提交按钮element。

---

运行下面的代码片段或检查此myForm.submit();以获取上述的实际示例：

form.submit()
submit()

---

来源：JSFiddle