Форма в модальном. Нужно перенаправить на модальный после отправки формы

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. Дайте вашу форму идентификатор, мой пример использует my_form
2. Используйте AJAX чтобы отправить форму и отправить ответ на modal
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'); 
    }); 
});