AJAX form submit не работает в IE11 и Edge

Question

Невозможно решить проблему с отправкой формы. Я использую этот код для моей формы:

 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Callback request</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Please send us your contact information and we will call you back soon</p> 
      <form class="callback" method="post" id="form1"> 
       <div class="input-group"> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
       <input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name"> 
       </div> 
       <br> 
       <div class="input-group"> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span> 
       <input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number"> 
       </div> 
       <br> 
       <div class="input-group"> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
       <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email"> 
       </div> 
       <br> 
       <textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea> 
       <input type="hidden" class="form-control" name="subject" value="Callback request"> 
      </form> 
      <p class="text-center">We don't share any of your personal data with anyone</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="submit" class="btn btn-primary submit" form="form1" onclick="yaCounter12657748.reachGoal('order'); return true;">Submit</button> 
      </div> 
     </div> 
     </div> 
    </div> 

И этот сценарий

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var msg = $("#form1").serialize(); 
     var options = { 
      type: "POST", 
      url: "callback_form.php", 
      data: msg, 
      success: function(data) { 
       $("#modal p").fadeOut("fast"); 
       $("#form1").fadeOut("fast", function(){ 
        $(this).before("<h4 class='text-center'>Thank you for your message</h4>"); 
        setTimeout("$('#modal').modal('hide')", 3000); 
       }); 
      }, 
      error: function(xhr, str){ 
       alert("Error occured!"); 
      } 
     }; 
     $('#form1').submit(function(e) { 
      e.preventDefault(); 
      $('#form1').ajaxSubmit(options); 
     }); 
    }); 
</script> 

форма отлично работает в Mozilla, Opera, Chrome, Safari и, возможно, некоторые другие браузеры, но в IE11 и Краю (и I «Конечно, это не весь список), он ничего не делает, когда я нажимаю кнопку« Отправить ». Он не исчезает, не показывает никаких ошибок в консоли. Я также использую плагин jQuery Form для решения проблемы с Safari, но, к сожалению, он по какой-то причине не может обрабатывать IE и Edge. Может быть, у меня есть некоторые синтаксические ошибки?

Answer 1

Хорошо, я нашел, почему не работает в IE. Вы вставили свою кнопку за пределы своей формы. Поместите это внутри. Работайте отлично!

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Callback request</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Please send us your contact information and we will call you back soon</p> 
     <form class="callback" method="post" id="form1"> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
      <input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name"> 
      </div> 
      <br> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span> 
      <input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number"> 
      </div> 
      <br> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
      <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email"> 
      </div> 
      <br> 
      <textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea> 
      <input type="hidden" class="form-control" name="subject" value="Callback request"> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="submit" class="btn btn-primary submit" form="form1" onclick="">Submit</button> 
      </div> 
     </form> 
     <p class="text-center">We don't share any of your personal data with anyone</p> 
     </div> 

    </div> 
    </div> 
</div>