IE11中表单按钮无法工作

Question

我已经创建了一个带有提交按钮的表单，提交按钮位于实际表单之外，但是通过使用form属性来定位表单，例如：

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

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

对于这个例子的不足我深感歉意。除了IE 11之外，它在所有浏览器上都可以正常工作。您有什么想法能够解决这个问题吗？我不想写脚本，虽然可以用jQuery 实现，但如果可能的话，我更愿意保持代码整洁。

- Philip

---

为什么不在<form>标签内使用<input type="submit">？将按钮放在<form>标签外面不是一个好的做法。 - hamed

将其放在外部的原因是为了使其与表单和包含表单的容器浮动方式不同。 - Philip

IE文档中写道：“检索嵌入对象的表单的引用。” - Teemu

HTML5表单属性在IE 8-9中如何工作？它不支持该属性。 - epascarello

那是我无法解决的异常情况。这就是为什么我创建了这篇帖子。但我使用了 @specialone 的答案。 - Philip

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

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

- specialone

---

这个确实完美地工作了，谢谢。但是有没有忽略jQuery的方法？为什么这在IE 11上不起作用，我找不到任何解释。 - Philip

@hamed是正确的，当您想与该表单交互时，将按钮放在表单外部是不正确的。是的，现在根据您的测试，IE11可能会有问题，但我相信如果您在几个浏览器和操作系统上进行更多测试，您会发现它们也可能无法正常工作。如果您想忽略jQuery，我建议您将正确的输入按钮/提交放在表单内部。 - specialone

@Philip 如果我的回答解决了你的问题，请选择我的帖子作为你的答案。 - specialone

@specialone：在HTML5中，将提交按钮放在表单之外（使用属性form=<formId>）是完全正确的。只是似乎IE/Edge不太兼容。 - bjunix

如果使用Javascript，您不需要第二个隐藏的提交按钮。只需执行 document.getElementById('myform').submit() 或使用jQuery $('#myform').submit()。 - bjunix

Answer 2

我想发布我的答案，因为这篇帖子帮了我很多，我也想到了一个能在旧版浏览器上实现“表单外按钮”功能的想法。

我使用 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表单验证器。

- Noé

Answer 3

<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以form-开头，所以在其他页面上您可以拥有不同的表单：）

- Voldemaras Birškys

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>

- user3917092

---

问题是指一个按钮，而不是一个标签。 - James Gentes