Question

我正在尝试将元素设置为在单击（提交数据后）后禁用。问题是，当我使用javascript禁用单击时，该按钮被禁用，但不提交信息。

function disableButton(btn) {
  document.getElementById(btn.id).disabled = true;
  alert("Button has been disabled.");
}

<center><button type="submit" id="btn1" name="Submit" onclick="disableButton(this)">Submit</button></center>

有人知道如何解决此问题吗？我不是很有经验。我已经使用了表单，但没有将其作为元素。谢谢。

Answer 1

尝试以0超时延迟禁用。这应该在脚本生命周期结束时禁用该按钮，从而允许表单在以下时间之前发布：

function disableButton(btn) {
  setTimeout( () => {
    btn.disabled = true;
  }) // No need to set a duration for the timeout
}

<form>
<button type="submit"
       onclick="disableButton(this)"
       action="/test">Submit</button></form>

现在，如果您检查控制台，则会看到正在发出GET请求。

此外，<center>已过时，HTML5不支持。

Answer 2

如果使用addEventListener，则不会出现此问题。有关说明和示例，请参见下文。另外请注意，这是我测试过的Chrome / Safari特定错误。

您正在执行的操作会在单击过程中禁用按钮。当浏览器检查它是否应该提交表单时，它不会（尽管我还没有发现应该in the standard的东西）。

如果您在表单的Submit事件中处理它，则该按钮是否被禁用的检查已经通过。

Disables using onclick so you still see it here in this example.
<form>
  <button type="submit" action="/test" onclick="this.disabled = true">Submit</button>
</form>

Disables it in the onsubmit handler, so it disappears here in this example.
<form onsubmit="this.querySelector('button').disabled = true">
  <button type="submit" action="/test">Submit</button>
</form>

但是，当我在没有内联处理程序的版本上工作时，我意识到以这种方式无法再现（看似不正确）的行为。

我建议您使用JS事件处理程序，并且应该处理Submit事件，因为它在语义上更为准确（甚至使用addEventListener也无法解决Safari中的问题）。

function queryRegister(query, eventName, handler) {
   document.querySelector(query).addEventListener(eventName, handler);
}

queryRegister("#click-handler-form button", "click", (e) => {
    e.target.disabled = true;
});

queryRegister("#submit-handler-form", "submit", (e) => {
    e.target.querySelector("button").disabled = true;
});

Both submit without inline handlers
<hr />
button.onclick
<form id="click-handler-form">
  <button type="submit" action="/test">Submit</button>
</form>

form.onsubmit
<form id="submit-handler-form">
  <button type="submit" action="/test">Submit</button>
</form>

Answer 3

为什么不尝试在表单上放置禁用功能？

如果您是，这里是代码和站点： ** https://www.the-art-of-web.com/javascript/doublesubmit/ **

<form method="POST" action="..." onsubmit="myButton.disabled = true; return true;">

<input type="submit" name="myButton" value="Submit"> </form>

此外，尝试使用onsubmit。

如果您正在使用js验证，则可以使用

<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>

<script type="text/javascript">

  function checkForm(form)
  {
    //
    // validate form fields
    //

    form.myButton.disabled = true;
    return true;
  }

</script>

Answer 4

如果<button type="submit">标签不在<form></form>内，则无需提交任何内容。 <button type="submit">仅提交其父<form>

Answer 5

尝试使用Javascript提交表单。

<li *ngIf="data.delivery_status==='3' OR '6';then success else danger"></li>
<ng-template #success>
    <td><span class="btn btn-success btn-sm">Sent</span></td>
</ng-template>
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>

提交<button>未通过javascript禁用提交的

5 个答案: