表单按钮在 IE11 中不起作用

Question

我创建了一个带有提交按钮的表单，提交按钮位于实际表单之外，但它使用 form 属性来定位表单。

<form id="myform">
</form>

<button form="myform"></button>

对于本周的例子，我深表歉意。这适用于除 IE 11 以外的所有浏览器。IE 8-10 100% 有效。关于如何解决这个问题的任何想法。我不喜欢写脚本。我可以用 jQuery 做到这一点，但我更愿意尽可能保持干净

Answer 1

这是一个只有一个点击事件和一行 css 的解决方案。（最小）

如果您的按钮由于用户界面设计的原因必须在表单之外。

我建议您在表单中添加一个输入 submit/button：

<form id="myform">
   <input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>

隐藏输入：

.myButton {display:none;} OR {visibility:none;}

使用jQuery触发点击表单内的输入按钮：

$('#outerBtn').on('click', function(e){
   e.preventDefault();
   $('.myButton').trigger('click');
});

只是一些快速的回答。应该没问题如果您不想编写脚本，我建议您只在表单中输入 button/submit。

Answer 2

<form id="form-any-name">
   <input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>

<script type="text/javascript">
    $(document).ready(function() {
        $('button[type=\'submit\']').on('click', function() {
            $("form[id*='form-']").submit();
        });
    });
</script>

只需在准备好的提交捕获器上包含文档，您可以将该代码放在主 js 文件中，因为我们捕获以表单开头的动态表单 ID - 因此在其他页面中您可以有不同的表单:)

Answer 3

IE 理解'for'，你可以使用"label for=''"。

    <label for="form_one_submit">Button one</label>
    <form action="" id="form_one">
      <span></span>
      <input type="submit" id="form_one_submit" style="visibility:hidden;">
    </form>

Answer 4

我想 post 我的回答，因为这个 post 对我帮助很大，如果你想在旧版本上添加“表单外按钮”功能，我想出了一个可行的想法浏览器。

我使用 JQuery 但我不认为使用纯 JS 会是一个主要问题，因为它不是复杂的代码。

只需创建一个 class 正如此处建议的一些答案

.hiddenSubmitButton {
    display: none;
}

$("body").on("click", "button[form]", function () {
    /*This will get the clicks when make on buttons with form attribute
     * it's useful as we commonly use this property  when we place buttons that submit forms outside the form itself
     */
    let form, formProperty, formAttribute, code, newButtonID;
    formProperty = $(this).prop("form");
    if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others "" 
        return; //Browsers that support the form property won't continue
    }
    formAttribute = $(this).attr("form");
    form = $("#" + formAttribute);
    newButtonID = formAttribute + "_hiddenButton";
    if (document.getElementById(newButtonID) !== null) {
        $("#" + newButtonID).click();
        return;
    }
    code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
    $(form).append(code);
    setTimeout(function () {
        $("#" + newButtonID).click();
    }, 50);
});

我喜欢在表单外创建按钮的一件事是它们允许我们更轻松地自定义设计，我们可以使用此代码，它可以在旧浏览器上运行，而且浏览器将使用其 HTML 表单验证器。

表单按钮在 IE11 中不起作用

Form button not working in IE11

html

forms

internet-explorer