文章/答案/技术大牛

发布

社区首页 >问答首页 >调用IE11表单提交事件，但未提交表单。

问调用IE11表单提交事件，但未提交表单。
EN

Stack Overflow用户

提问于 2019-05-30 17:38:34

回答 1查看 170关注 0票数 0

我遇到了一个只发生在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中，如果输入文件是隐藏的是不可见的(显示:无、可见性:隐藏的或不透明的: 0)，这就无法工作。

Edit1：如果我通过浏览器控制台触发事件，则提交表单。

html

forms

ecmascript-6

javascript

jquery

回答 1

Stack Overflow用户

发布于 2019-05-31 12:01:23

我没有找到问题的根源，但我找到了绕过这个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>

联署材料：

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来触发inputtype=“文件”行为，而是使用label + id来触发单击，那么它就像一个魅力。问题似乎与使用JS触发inputtype=“文件”有关。

另外：

如果表单中没有inputtype=“提交”，IE就不会发送表单。
IE不触发inputtype=“文件”是隐藏的或不可见的，我已经实现了相同的行为，使用高度: 0；宽度: 0；

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56383068

复制

相似问题

问调用IE11表单提交事件，但未提交表单。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调用IE11表单提交事件，但未提交表单。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调用IE11表单提交事件，但未提交表单。
EN