在提交模态表单之前执行代码

Question

我有一个非常简单的模态表单，最终将用于将数据插入 SQL 数据库。因为我是新手，所以我只是想确认控制是否正确传递，但是下面的代码似乎不起作用。

这是我的 HTML 代码：

<div class="modal" id="new-role-modal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">New User Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div> 
                <div>
                    <form method="post" id="new-role">
                        <input type="text" class="form-control" id="role-title" placeholder="Role Title" name="role-title">
                        <div class="modal-actions">
                            <div>
                                <button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>
                                <button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
  </div>

我的jquery代码是：

$("#new-role").submit(function(e){
      e.preventDefault(e);
      alert('submit intercepted');
    });

一旦我可以显示警报，我最终将用验证和相关代码替换它以添加数据，但现在我什至无法显示警报。我哪里做错了？

Answer 1

改变

<button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>

到

<button type="submit" class="btn-link modal-action" id="add-role" value="add-role"><strong>Continue</strong></button>

您的脚本可以运行。

问题：您的提交按钮具有 data-dismiss="modal" 属性，该属性使模式在没有运行您的脚本的情况下关闭。

在提交模态表单之前执行代码

Execute code prior to submission of modal form

javascript

jquery

preventdefault