表单提交时触发browser alert功能不生效，如何排查解决？

问题原因 #

1. 事件绑定语法错误
   你在onclick属性中仅填写了函数名formSuc，没有添加调用函数所需的括号，浏览器只会将其识别为函数对象，不会主动执行该函数，因此alert不会触发。
2. 表单默认提交行为冲突
   type="submit"属性的按钮被点击后会默认触发表单提交，页面会跳转或刷新，就算修复了函数调用语法，也大概率出现alert一闪而过、还没等用户确认就消失的问题。

修复方案 #

你可以参考以下两种方案调整代码：

方案1：修复调用逻辑+手动控制表单提交

适合需要保留submit按钮原有交互的场景，需要先给你的表单标签添加id属性（示例假设为yourFormId，你可以替换为自己的命名）：

<div class="col-md-12">
    <!-- 给onclick的函数添加括号，同时传入事件对象 -->
    <input onclick="formSuc(event)" type="submit" class="btn btn-box" value="ABSENDEN">
 </div>

 <script>
    function formSuc(e) {
        // 先阻止表单默认提交行为，避免页面直接刷新
        e.preventDefault();
        alert("提交成功");
        // 弹窗触发后手动提交表单
        document.getElementById("yourFormId").submit();
    }
</script>

方案2：绑定表单submit事件（更推荐）

直接将提示逻辑绑定在表单的提交事件上，更符合表单操作的原生逻辑：

<!-- 给form标签绑定onsubmit事件 -->
<form action="你的提交地址" method="post" onsubmit="formSuc(event)" id="yourFormId">
    <!-- 其余表单内容省略 -->
    <div class="col-md-12">
        <input type="submit" class="btn btn-box" value="ABSENDEN">
     </div>
</form>

<script>
    function formSuc(e) {
        e.preventDefault();
        alert("提交成功");
        document.getElementById("yourFormId").submit();
    }
</script>

内容的提问来源于stack exchange，提问作者xadrus1799