Событие отправки формы IE11 вызывается, но форма не отправляется

Question

У меня странная проблема, которая возникает только в IE11. У меня есть следующая форма:

<form id="myform" action="http://my.url.com/mypage" method="POST">
    <a href="#" class="js-triggerFileInput">Send the file</a>
    <input type="file" name="myfile" class="hidden js-inputFile" />
    <input type="submit" value="submit" class="hidden" />
</form>

И следующий javascript (ES6 с транспилером):

class MyForm {
  constructor() {
    this.button = $('.js-triggerFileInput');
    this.file = $('.js-inputFile');
    this.form = $('#myform');
  }

  // when I click on the visible button, triggers the file input dialog box
  this.button.click(() => {
    this.file.click();
  });

  // the the file is selected in the dialog box, submit the form
  this.file.change(() => {
    this.form.submit();
  });

  // I added this just to debug
  this.form.submit(() => {
    console.log('submitted');
    return true;
  });
}

Это работает во всех браузерах, кроме IE11, форма не отправляется вообще.

Я добавил отладку, чтобы узнать, вызывается ли событие submit и вызывается ли он каждый раз, но браузер не отправляет форму.

Если я пытаюсь отправить форму, используя кнопку отправки, она работает нормально, но когда я пытаюсь отправить, используя javascript, это вызывает событие, но не работает.

Кто-нибудь знает, что не так с моим кодом?

Я даже попробовал другой подход:

<label for="myinput">Send the file</label>
<input id="myinput" type="file" class="hidden" />

И использовать стандартную метку / поведение ввода для запуска входного файла без необходимости использования .click(), и это, кажется, работает лучше, но в IE11 это не работает, если входной файл скрыт, невидим (display: none , видимость: скрытая или непрозрачность: 0).

Edit1 : если я запускаю событие через консоль браузера, форма отправляется.

Answer 1

Я не нашел источник проблемы, но нашел способ обойти эту ошибку IE:

HTML:

<form id="myform" action="http://my.url.com/mypage" method="POST">
    <label for="myfile">Send the file</label>
    <input type="file" name="myfile" id="myfile" class="js-inputFile" />
    <input type="submit" value="submit" class="hidden" />
</form>

JS:

class MyForm {
  constructor() {
    this.file = $('.js-inputFile');
    this.form = $('#myform');
  }

  // the the file is selected in the dialog box, submit the form
  this.file.change(() => {
    this.form.submit();
  });
}

Если я не использую кнопку + JS, чтобы вызвать поведение ввода [type = "file"], и вместо этого использую label + id, чтобы вызвать щелчок, это работает как шарм.Кажется, проблема связана с активацией ввода [type = "file"] с использованием JS.

Также:

• IE не отправляет форму, если ее нетinput [type = "submit"] внутри формы.
• IE не запускает ввод [type = "file"] скрыт или невидим, я добился того же поведения, используя height: 0;ширина: 0;