AJAX form submit doesn't work in IE11 and Edge

Question

Can't solve a problem with form submittion. I use this code for my form:

        <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>

And this script

    <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>

The form works fine in Mozilla, Opera, Chrome, Safari and maybe some other browsers but in IE11 and Edge (and I'm sure this is not the whole list) it doesn't do anything when I click submit button. It's doesnt fade, doesn't show any errors in a console. I also use a jQuery Form Plugin to solve the problem with Safari but unfortunately it can't handle IE and Edge for some reason. Maybe I have some syntax errors here?

Answer 1

Ok, i have found why not working in IE. You have inserted your button outside your form. Place this inside. Work fine!

<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>