Submit Button Outside Form

Question

I have a checkout page that is designed like this:

<!-- 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.

If the quantity of a cart item is changed, the quantity of the cart item is updated via AJAX.

My problem is that I would like to have the Place Order button at the bottom of the page below the Order Summary section. However, the Place Order button must be inside the checkout info form to act as a submit button.

I have a few options:

1. I can change the order of the page so that the Order Summary section is on top and the Checkout Info section is at the bottom. This is the simplest way to get the Place Order button at the bottom, but I don't like the way it looks.

2. I can make the Place Order button position: fixed so that it sticks to the bottom of the page at all times. However, this crowds the screen on mobile phones and is a bit confusing because it will show at all times, even before the customer has filled out the necessary information for ordering.

3. I can create a dummy button at the bottom of the page that is not contained inside any form. I can then use Javascript to listen for clicks on this button. Whenever it is clicked, it can click the Place Order button that still resides inside the form. This button that still sits inside the form can be hidden so that only one Place Order button is present on the page at one time.

Option 3 looks the best to me visually. However, I am concerned about the reliability of this solution. If Javascript is not enabled or something prevents the click event from triggering, the customer may be unable to place her order. Is this a valid concern?

Does anyone have any other suggestions for achieving this setup with the Place Order button at the bottom of the page?

Answer 1

You can just get any button to submit any form you'd like.

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

Or in jQuery...

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

Answer 2

How much content is actually below the form? Is there any way you could just have one big form tag that encapsulates the different order sections, as well as the Checkout button?

Otherwise, could you try position:absolute to position the button below the fold at the bottom of the page, as opposed to position: fixed. That way it would always sit at the bottom and not scroll with the page.