设置禁用属性不会在 Safari iOS 上提交表单

Question

我正在尝试用一些动画制作一个奇特的按钮，一旦点击(或在手机上触摸(就会禁用它。然而我面临一个问题。问题是，设置disabled属性确实完成了动画，但不会提交表单。不过，它在PC上工作！

<form class="needs-validation" action="" method="post" enctype="application/x-www-form-urlencoded" role="form">
    <div class="card shadow">
        <div class="card-body">
            <h2 class="card-title text-center">Form</h2>
            <div class="form-floating mb-3">
                <input class="form-control" name="id" placeholder="Enter ID" type="text" required>
                <label>ID<label>
            </div>
            <div class="mb-3 text-end">
                <button type="submit" class="btn btn-primary" name="submit" id="submit"
                    onclick="submitForm();">Search</button>
            </div>
        </div>
    </div>
</form>

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    submitBtn.setAttribute("disabled", true);
}

我遗漏了什么，还是iOS上Safari的错误？

编辑：

尝试了ontouchend=submitForm();，但没有解决问题。

Answer 1

编辑：更简单的答案

只需将侦听器/处理程序从按钮的onclick移动到表单的onsubmit即可。

1. 这会导致您的侦听器/处理程序仅在调用提交进程后才被调用，因此禁用设置不会影响该进程
2. 这也意味着您不需要手动调用form.submit()
3. 然后，您可以在元素上拥有原始的name="submit"(尽管我不建议使用它，因为它会覆盖submit函数(

---

原始答案

之所以会发生这种情况，是因为onclick事件处理程序发生在表单提交之前。随后，当需要提交表单时，提交输入将被禁用，因此表单不应提交。

您还将您的按钮命名为"；提交"；用CCD_ 8。将名称更改为其他名称，例如"；submitButton"；以避免影响本地CCD_ 9功能。

现在，您可以在submitForm处理程序中调用submit：

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    submitBtn.setAttribute("disabled", true);
    // calling submit manually
    form.submit();
}

---

详细信息：

表单的命名输入被分配给表示该表单的对象。

例如，如果您有一个名为myForm的表单，并且它有一个名称为firstName的输入，那么可以用JavaScript访问firstName，例如：myForm.firstName。

现在您有一个名为"；提交"；(提交按钮(。猜猜表单对象上的submit是什么？实际用于实际"；提交"；你的表格。

当你有一个名为"；提交"；submit的方法被完全不同的东西覆盖，并且它不再指向submit函数，因此submit不再工作。