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文件中，因为我们从表单开始捕获dinamicaly表单id-所以在其他页面中您可以拥有不同的foms：）

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

Answer 4

IE了解＆＃39;对于＆＃39;，您可以使用＆＃34;标签=＆＃39;＆＃39;＆＃34;＆＃39;。

cy

表单按钮在IE11中不起作用

4 个答案: