Triggering form submission outside the <form>

Context

Suppose I want to build a checkout page like below:

• The first box (above) contains the guest form

• The second box (below) is a bottom sheet containing the hotel rate and the form submission button

To make the bottom sheet sticky at the bottom of the page, we have to separate the container for the form and the bottom sheet.

Problem

How to make a form submission with a bottom outside the form itself?

Solution

According to the MDN docs, we can put a form attribute to the <button> element. It will associate the button with a <form> (the value of form should be as same as the id of the <form>).

Clicking the associated button will trigger the form submission.

Example

<div id="form-container">
    <form id="guest-form">
        <input type="text" id="name" name="name" required />
        <input type="text" id="email" name="email" required />
    </form>
</div>

<div id="bottom-sheet">
    <button form="guest-form">Book</button>
</div>