IE 11提交我的表单并跳过我的e.preventDefault()

时间:2018-06-06 22:00:08

标签: javascript jquery html debugging internet-explorer-11

我有一个简单的表格,如:

<form method="get" accept-charset="UTF-8" id="serial_number" parsley-validate="">
  <input type="hidden" name="_token" value="DTsfsdfsdf">

  <input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg parsley-validated parsley-success" placeholder="Serial Number">

  <input maxlength="200" type="text" name="pin" id="pin" required="required" class="form-control input-lg parsley-validated parsley-success" placeholder="Voucher PIN">
  <input type="hidden" name="id" id="id" value="1">

  <button name="foo" class="btn btn-primary nextBtn btn-lg pull-right full" type="submit">Next</button>

</form>

我尝试使用JQUERY提交此表单:

$("#serial_number").submit(function(e) {
  $('.loadPage').toggle();
  var url = "/getData";

  $.ajax({
    type: "GET",
    url: url,
    data: $("#serial_number").serialize(),
    dataType: "json",

    success: function(data) {
      console.log(data);
      if (!data.data) {
        $('#error_message').empty();
        $('#error_message').append('<div class="alert alert-info"><a href="#" class="close" data-dismiss="alert" aria-label="close"> ×</a><div class=""><i class="fa fa-info-circle" aria-hidden="true"></i> Sorry. Can you please call us on 345345345 so that we can help you.  </div></div>');
        $('.loadPage').toggle();
      } else {
        var secretS = $('#serial').val();
        var secretP = $('#pin').val();

        if ((data.data.hasOwnProperty("CanClaim") && data.data.CanClaim === true) || (secretS === '9999' && secretP === '9999')) {

          var s = $('#serial').val();
          var p = $('#pin').val();
          item = {}
          item["serial"] = s;
          item["pin"] = p;
          jsonObj.push(item);

          if (secretS == '9999') {
            $('#ChannelName').val('{{$user->def_virgin_channel}}');
            $('#voucher_name1').html('TESTING');
            $('#voucher_name2').html('TESTING');
            maxDate = '12-12-2018';
          } else {

            if (data.data.Voucher.PromoCode == '.') {
              cn = data.data.Voucher.ProductCode;
            } else {
              cn = data.data.Voucher.ProductCode + '_' + data.data.Voucher.PromoCode;
            }
            console.log('channel name: ' + cn);

            cn1 = ChannelName[cn];

            if (typeof cn1 !== "undefined") {
              $('#ChannelName').val(cn1);
            } else {
              $('#ChannelName').val('{{$user->def_virgin_channel}}');
              $('#good_channel').val(1);
            }

            console.log('channel name is: ' + cn1);

            $('#voucher_name1').html(data.data.Voucher.Description);
            $('#voucher_name2').html(data.data.Voucher.Description);


            maxDate = data.data.Voucher.ExpiryDateWithGracePeriod;
          }

          $.ajax({
            type: 'GET',
            url: "/setup",
            data: {
              ChannelName: $('#ChannelName').val(),
              id: $('#id').val()
            },
            success: function(data) {
              console.log(data);
              var url = "/getClosedDates"; // the script where you handle the form input.
              WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
              days = [];
              newArray = [];
              m = data.data.MinOnlinePartySize;
              p = data.data.MaxOnlinePartySize;
              d = data.data.OnlinePartySizeDefault;
              t = data.data.TermsAndConditions;
              a = data.data.AcceptBookingsDaysInAdvance;
              n = data.data.Name;
              rn = data.data.ReservationPhoneNumber;
              $.ajax({
                type: "GET",
                url: url,
                data: {
                  ChannelName: $('#ChannelName').val(),
                  id: $('#id').val()
                },
                dataType: "json",
                success: function(data) {

                  days = data.data.ClosedDays;
                  newArray = days.map(function(day) {
                    return WEEKDAYS.indexOf(day);
                  });
                  console.log(newArray);
                  covers(m, p, d);

                  $('#tos').html(t);

                  $('#res_name').html(n);
                  $('.res_name').html(n);

                  $('#res_phone').html(rn);
                  $('.res_phone').html(rn);
                  if (a == 'null') {
                    a = 1000;
                  }
                  $('#datum').datetimepicker({
                    useCurrent: false,
                    format: 'YYYY/MM/DD',
                    inline: true,
                    minDate: new Date(),
                    maxDate: maxDate,
                    daysOfWeekDisabled: newArray,
                    locale: 'en-gb'

                  });
                  $('#step-1').hide();
                  $('#step-2').show();
                  $(".step-2").addClass('btn-primary');
                  $('.loadPage').toggle();
                },
                error: function(data) {
                  console.log(data);
                  $('#myModal2').modal('show');
                }
              });

            },
            dataType: "json",
            error: function(data) {
              console.log(data);
              $('#myModal2').modal('show');
            }
          });

          console.log(data.data.Message.Code);

          $('#voucher_name').html(data.data.Voucher.Description);


        } else {
          console.log(data);
          $('#error_message').empty();
          if (data.data.hasOwnProperty("Message")) {
            $('#error_message').append('<div class="alert alert-info"><a href="#" class="close" data-dismiss="alert" aria-label="close"> ×</a><div class=""><i class="fa fa-info-circle" aria-hidden="true"></i> ' + data.data.Message.Description + '  </div></div>');
          } else {
            $('#error_message').append('<div class="alert alert-info"><a href="#" class="close" data-dismiss="alert" aria-label="close"> ×</a><div class=""><i class="fa fa-info-circle" aria-hidden="true"></i> ' + data.data.Description + '  </div></div>');
          }
          $('.loadPage').toggle();
        }
      }
    },
    error: function(data) {
      console.log(data);
      $('#myModal2').modal('show');
    }
  });

  e.preventDefault();
});

我知道我发布了大部分代码,但这是必要的......我真的不知道发生了什么!试着整天调试这段代码。

究竟是什么问题?当我点击SUBMIT按钮时,我想运行jquery代码,这在Chrome和FireFox中运行良好,但是当我尝试使用IE11时,点击该按钮只需重新加载包含表单数据的页面。

0 个答案:

没有答案