表单外提交按钮的跨浏览器解决方案答案

【问题标题】：Cross browser solution for submit buttons outside form表单外提交按钮的跨浏览器解决方案
【发布时间】：2014-10-20 09:04:30
【问题描述】：

我基本上是在尝试实现这一点 http://www.impressivewebs.com/html5-form-attribute/

我有一个购物车，它正在输出并被一个 html 表夹在中间。在表格下方，我目前有我的提交按钮。

<thead>
    <tr>
        <th>ITEM</th>
        <th>PRICE</th>
        <th>WEIGHT (Kg)</th>
        <th>QTY</th>
        <th>SUBTOTAL</th>
        <th></th>
    </tr>

</thead>
<tbody>
        <form action='shop.php' id='cart' method='post'>
        <?php  echo $cartOutput; ?>
        </form>

        <tr>
            <td class="totals"><strong>Total</strong></td>
            <td class="totals">&nbsp;</td>
            <td class="totals"><?php if (isset($weightTotal)) { echo $weightTotal . 'kg';} ?> </td>
            <td class="totals"><?php if (isset($quantityTotal)) { echo $quantityTotal; } ?></td>
            <td class="totals"><strong><?php if (isset($cartTotal)) { echo '$' . $cartTotal; } ?></strong></td>
            <td class="totals"></td>
        </tr>   
</tbody>

/*这里的代码整理表*/

<div class="col-lg-12 col-md-12 col-xs-12 remove-padding">

                            <button type="submit" class="btn btn-default" form="cart" name="adjustButton" id="adjust-button">UPDATE CART</button>
                            <button type="button" class="btn btn-default" form="contact" name="order" id="order-button" onclick="confirmOrder()" >ORDER NOW</button>
</div>

因此，由于我希望布局看起来的方式.. 我不能将按钮放在表单内。我希望能够将更新按钮放在购物车下方。现在订单按钮不是提交按钮，而只是一个按钮。我可以将它放在它自己的表单部分下面，但现在我通过 javascript 强制它进行确认，然后如果他们说 OK，则通过 JS 提交请求。

我想在支持包括 IE 9 +10 在内的浏览器的同时保留该功能。从我发现form="" 在 IE 中不起作用

我能做到吗？

【问题讨论】：

标签： javascript html forms form-submit

【解决方案1】：

将form 标签放在所有“相关”内容（包括提交按钮）之外：

<body>
    <form>
        <table>
        </table>
        <div>
            <button>
            </button>
        </div>
    </form>
</body>

如果按钮不能在表单内部，则将表单置于按钮。

【讨论】：

这是最简单和最直接的解决方案，除非 OP 没有告诉我们其他限制，否则我会这样做。否则我可能会选择HTML5 shim
大声笑，帖子的最后一句话听起来就像古老的智慧！
@BrianBolli 是！参考山脉和 Mahoma :D 好收获！

【解决方案2】：

这应该适用于所有浏览器：

   document.getElementById('cart').submit();

您可以将它放在 onClick 中，如果需要，可以将其包装在一个函数中。

编辑：由于问题（根据下面的 cmets）是您在表单之外有输入：真正最简单且不涉及 Javascript 的解决方案是将 </form> 放在页面末尾（所以您的所有输入和按钮都将在表单中）。但是，如果您需要在页面上拥有多个表单，这当然是行不通的，而且根据页面的布局方式甚至可能无法实现。

【讨论】：

@Robert Rozas，是的。我错过了什么？
请阅读表单属性部分，您会注意到 OP 在表单标签之外有一些输入并以这种方式链接......但在 9+10 中不起作用。 ..并且使用您的js方式，它不会提交通过表单属性链接的输入...
我之前曾尝试将表单放在最后，但它不喜欢将所有标记放在中间。它破坏了功能:(我认为我在表单之外没有输入。按下订单按钮时，它会将信息从 1 个表单中提取出来。所有其他信息都存储在会话中，因此我可以在下一页上调用它. 在这种情况下... submit() 是否适用于 IE9？
@Clam，我没有在 IE9 上专门测试过它，但它的旧功能确实应该这样做。
@RobertRozas 如果页面上只有一个表单，您只需确保所有控件都在表单标记中，方法是先启动表单并稍后结束它。没有什么可以强迫人们将表格放在表格中。如 Bart 所示，将其设为 <body><form ...> stuff <table> cart etc. </table> ... </form></body>。 OP可能没有显示或告诉我们一些其他限制，但这是另一回事。

【解决方案3】：

如果您的提交按钮在表单之外，并且您在表单之外有一些输入元素，那么发送此表单（不使用 ajax）的最简单方法是制作一个表单并将您的提交按钮放入其中。

由于您的输入字段在表单之外，您将在表单内复制这些输入字段并使用display:none; 隐藏它们，当用户更改可见输入字段的值时，您将使用 javascript 来更改值隐藏的输入字段。

通过这种方式，您可以以通常的方式发送表单，而输入字段不必位于表单本身内.....

【讨论】：

@Robert Rozas "OP 在表单标签之外有一些输入" 那么这个答案是对的吗？
您编辑了原始答案...现在看起来更像是评论，但实际上，您的方法应该是解决此问题的众多方法之一，现在，您能否提供一些工作示例关于如何满足 OP 需求的代码？
有没有办法不涉及AJAX？现在我只是将我的购物车存储在会话中，并在下一页中使用它作为电子邮件订单发送。我的主要问题是按钮位于表单之外并且能够在 IE9+10 中提交表单数据

【解决方案4】：

您可以将外部表单元素复制到表单内部并使用JS同步它们。

http://jsfiddle.net/rudiedirkx/y0cmda4o/

if ( !('fform' in document.createElement('input')) ) {
    $('input[fform], textarea[fform], select[fform]').on('change', function(e) {
        this.$hidden.val(this.value);
    }).each(function(i, el) {
        var formId = $(el).attr('fform'),
            $form = $('#' + formId),
            $hidden = $('<input name="' + el.name + '" type="hidden">');
        $form.append($hidden);
        el.$hidden = $hidden;
    });
}

如您所见，我使用了fform 属性来触发if 语句。改成form，在IE里试试。

免责声明：

这不适用于多个值元素（如select[multiple]），否则您必须添加一些严肃的 JS 来伪造这些多个值。
这不会发送触发按钮值。普通提交按钮只发送它们的值，而不发送其他提交按钮。你也许可以添加一个onclick 来处理它......如果你使用它。

【讨论】：