Question

我基本上试图实现这一点 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中不起作用

我可以实现吗？

Answer 1

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

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

如果按钮不在表单内，请将表单放在表单之外按钮。

Answer 2

这适用于所有浏览器：

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

您可以将其放在onClick中，并在需要时将其包装在函数中。

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

Answer 3

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

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

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

Answer 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来处理...如果您使用它。

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

4 个答案: