表单按钮在 IE11 中不起作用

Question

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

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

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

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

Answer 1

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

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

我建议你在表单中添加一个输入提交/按钮：

<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');
});

只是一些快速的答案。应该没问题。 如果您不想编写脚本，我建议您将输入按钮/提交保留在表单中。

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

我想发布我的答案，因为这篇文章对我有很大帮助，而且我想出了一个想法，如果你想在旧版浏览器上添加“表单外按钮”功能。

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

按照这里建议的一些答案创建一个类

.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 表单验证器。

Answer 4

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>