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

Cross browser solution for submit buttons outside form

本文关键字：浏览器 解决方案 按钮 提交 表单      更新时间：2023-09-26

我基本上正在尝试实现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 中不起作用

我能做到这一点吗？

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

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

如果按钮不能在窗体内部，请将窗体设置在按钮

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

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

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

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

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

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

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

您可以将外部表单元素复制到表单内部，并使用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来处理这个。。。如果你使用它
相关文章：