以模态形式。表单提交后需要重定向到模式

Question

我有一个模态的表单，在我提交表单后，我希望它保留在带有新内容的模态中。到目前为止，我有：

HTML：

<form action="" method="get">

        ${alert}
        <div class="spacing">&nbsp;</div>
    <table id="myTable" class="table table-striped table-bordered">
        <thead><tr><th>#</th><th>Staff</th><th>Date</th><th>Project</th>  <th>Task</th><th>Notes</th><th>Hours</th></tr></thead>
        <c:forEach var="entry" items="${ref}" varStatus="count">
        <tr><td id="column1">${count.index+1}<td>${entry.staff}</td><td>${entry.date}</td><td>${entry.project}</td>
        <td>${entry.task}</td><td>${entry.notes}</td><td>${entry.hours}</td></tr>

    </c:forEach>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td id="total"></td></tr>

    </table>
    <input type='submit' value='EDIT' id='submitEdit'/>
</form>

和JAVASCRIPT：

$("#submitEdit").click(function(){
$("#dialog").modal('show');
//other code

我遇到的问题是在提交表单后将页面重定向回模式。现在，它重定向回原始页面，而不是模态。

另外，我尝试使用onsubmit事件来调用javascript函数，但这也没有用。

非常感谢任何帮助。谢谢！

Answer 1

要实现这一目标，您需要执行以下步骤：

1. 为您的表单提供ID，我的示例使用my_form
2. 使用AJAX提交表单并将回复发送给模态
3. 取消表单上的默认操作。

示例

$(document).on('submit', 'form#my_form', function(e) {
    e.preventDefault();

    $.get('/url/to/my/post/action', $(this).serialize(), function(response) {
        $('#dialog').html(response);
        $('#dialog').modal('show');
    });
});