Question

我的结帐页面设计如下：

<!-- Checkout Info Section >
    <form>
        <!-- Address Info >
        <!-- Shipping Option >
        <!-- Payment Info >
        <!-- Totals >
        <!-- Place Order Button >
    </form>


<!-- Order Summary Section >
    <!-- Cart Item>
        <form>
            <!-- Id >
            <!-- Quantity >
        </form>

    <!-- Cart Item>
        <form>
            <!-- Id >
            <!-- Quantity >
        </form>

    etc.

如果更改了购物车项目的数量，则通过AJAX更新购物车项目的数量。

我的问题是，我希望在“订单摘要”部分下方的页面底部显示“下订单”按钮。但是，“下订单”按钮必须位于结帐信息表单中才能充当提交按钮。

我有几个选择：

我可以更改页面的顺序，以便“订单摘要”部分位于顶部，“结帐信息”部分位于底部。这是将Place Order按钮放在底部的最简单方法，但我不喜欢它的外观。
我可以制作下订单按钮position: fixed，使其始终贴在页面底部。然而，这会挤在手机屏幕上并且有点混乱，因为它会在任何时候显示，甚至在客户填写必要的订购信息之前。
我可以在页面底部创建一个虚拟按钮，该按钮不包含在任何表单中。然后我可以使用Javascript来听取此按钮的点击次数。无论何时单击它，它都可以单击仍位于表单内的“下订单”按钮。仍然位于表单内的此按钮可以隐藏，以便一次只有一个“下订单”按钮出现在页面上。

选项3在视觉上对我来说是最好的。但是，我担心这个解决方案的可靠性。如果未启用Javascript或某些内容阻止触发点击事件，则客户可能无法下订单。这是一个有效的问题吗？

是否有人通过页面底部的“下订单”按钮有任何其他建议来实现此设置？

Answer 1

您可以按任意按钮提交您想要的任何表格。

<button onclick="document.myFormName.submit()">Checkout</button>

或者在jQuery中......

$('button#my-button').on('click', function() {
    $('form#checkout').trigger('submit');
});

Answer 2

表单下面有多少内容？有没有办法可以只有一个大的表单标签封装不同的订单部分，以及Checkout按钮？

否则，您可以尝试使用position：absolute将按钮定位在页面底部的折叠下方，而不是位置：固定。这样它总是位于底部而不是滚动页面。

提交表单外的按钮

2 个答案: