Не удается предотвратить перенаправление — отправить форму в модальном

#ajax #forms #submit #bootstrap-modal #preventdefault

#ajax #формы #Отправить #bootstrap-модальный #предотвращение по умолчанию

Вопрос:

У меня есть простая форма отправки, которая находится внутри модального модуля начальной загрузки, Этот код отлично работает, если я не использую модальный модуль, но как только я оказываюсь внутри модального модуля, функция preventDefault больше не работает, и функция submit перенаправляет на страницу к моей конечной точке: ( Есть идеи, что делает модальный модуль начальной загрузки, чтобы устранить проблему preventDefault? Или другой способ предотвратить перенаправление?

 <div id="bootstrapModal" class="bootstrapModal">
<div id="modal-dialog" class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="/myendpoint.cmd" id="myForm" name="myForm" role="form">
<div class="input-group">
<input type="email" name="userEmail" class="form-control" id="emailSignUp"   placeholder="Email Address">
<span class="input-group-btn">
<button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button>
</span>
</div>
</form>
</div>
</div>
</div




<script>
$('#myForm').submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
    console.log('success!')
        }
    });
    e.preventDefault(); //STOP default action
});
</script>
  

Ответ №1:

возможно, вы можете попробовать использовать синтаксис jquery

 <script>
$(document).ready(function(){
   $('#myForm').submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
        console.log('success!')
      }
    });
    e.preventDefault(); //STOP default action
});
});
</script>
  

Комментарии:

1. и убедитесь, что form action=’#’ <form action =»#» id= «myForm» name = «myForm» role=»form»>

2. Хм … ближе. Я больше не был перенаправлен со страницы — но это обновило страницу, чего я тоже не могу иметь…

Ответ №2:

Похоже, что у вас недопустимая (в двойных кавычках) запись в button, которая может нарушить поведение.

 <button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button>
  

Просто удалите повторяющиеся кавычки, как показано ниже:

<button type="submit" class="btn btn-secondary" id="emailbtn">Sign Up</button>