AJAX 양식 제출이 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> 

양식은 IE11 및 Edge (내가 모질라, 오페라, 크롬, 사파리와 아마 다른 브라우저 만에서 잘 작동 '이것이 전체 목록이 아닐 것입니다.) 제출 버튼을 클릭하면 아무 것도하지 않습니다. 그것은 사라지지 않고 콘솔에 오류를 표시하지 않습니다. 또한 Safari에서 문제를 해결하기 위해 jQuery Form Plugin을 사용하지만 불행히도 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>