HTML 表单确认提交错误答案

【问题标题】：HTML Form Confirm Submission bugHTML 表单确认提交错误
【发布时间】：2021-09-17 04:07:29
【问题描述】：

当我测试我的黑名单确认对话框时，我点击了通常提交表单的确定按钮，但在我的情况下，它没有提交，而是继续循环，我点击了它，什么也没发生，对话框还在显示。到目前为止，我提交表单的唯一方法是单击一次确定按钮，然后单击不正常的取消按钮。我希望它在我只按一次确定按钮时提交。下面是我用于对话框的js代码：

    function confirm_blacklist() {
        if (confirm("Are you sure you want to blacklist {{ user.name }}?")) {
            console.log("submitting");
            $("#blacklist-form").submit();
            console.log("submitted");
        } else {
            return false;
        }
    }

    function confirm_unBlacklist() {
        if (confirm("Are you sure you want to unBlacklist from {{ user.name }}?")) {
            console.log("submitting");
            $("#unBlacklist-form").submit();
            console.log("submitted");
        } else {
            return false;
        }
    }

两者都是一样的，只是确认消息的措辞不同，两种形式的id不同。

下面是使用这些函数的 HTML 部分：

    <div id="ext-option-menu" class="ext-opt-align">
        {% if user.blacklisted %}
        <form id="unBlacklist-form" method="POST" onsubmit="return confirm_unBlacklist()" action="{{ url_for('admin.adminAccountsUserManagement', user=user.name) }}">
            {{ ext_options.reason }} {{ ext_options.unblacklist }}
        </form>
        {% else %}
        <form id="blacklist-form" method="POST" onsubmit="return confirm_blacklist()" action="{{ url_for('admin.adminAccountsUserManagement', user=user.name) }}">
            {{ ext_options.reason }} {{ ext_options.blacklist }}
        </form>
        {% endif %}
    </div>

有没有办法修复这个错误？

【问题讨论】：

代替$("#blacklist-form").submit(); 使用return true 其他也一样。
@Swati 谢谢，这行得通，但我能否解释一下为什么$("#blacklist-form").submit(); 不起作用，因为我使用了同样的东西，但在不同的表单上使用了不同的 ID，并且该表单运行良好美好的。您能否将其作为答案，包括我的问题的解决方案？
我已经添加了答案，请检查:)

标签： javascript html jquery forms

【解决方案1】：

你看到这种行为是因为你写了onsubmit="return confirm_unBlacklist()"所以当你点击提交按钮并且如果用户点击ok然后你再次触发$("#unBlacklist-form").submit();所以再次调用相同的函数并进入无限循环.相反，您可以使用 return true 这样提交您的表单。

演示代码：

function confirm_blacklist() {
  if (confirm("Are you sure you want to blacklist {{ user.name }}?")) {
    console.log("submitting");
    return true;
    console.log("submitted");
  } else {
    return false;
  }
}

function confirm_unBlacklist() {
  if (confirm("Are you sure you want to unBlacklist from {{ user.name }}?")) {
    console.log("submitting");
    return true;
    console.log("submitted");
  } else {
    return false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="ext-option-menu" class="ext-opt-align">

  <form id="unBlacklist-form" method="POST" onsubmit="return confirm_unBlacklist()" action="{{ url_for('admin.adminAccountsUserManagement', user=user.name) }}">
    <input type="submit">
  </form>

  <form id="blacklist-form" method="POST" onsubmit="return confirm_blacklist()" action="{{ url_for('admin.adminAccountsUserManagement', user=user.name) }}">
    <input type="submit">
  </form>

</div>

【讨论】：