кнопку Submit Вне формы

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.

Моя проблема заключается в том, что я хотел бы иметь кнопку «Заказ места» в нижней части страницы под разделом «Сводка заказов». Тем не менее, кнопка «Заказ места» должна находиться внутри формы справки, чтобы действовать как кнопка отправки.

У меня есть несколько вариантов:

1. Я могу изменить порядок страницы, так что раздел Сводка заказа находится на вершине и в разделе заказ информация находится в нижней части. Это самый простой способ получить кнопку «Заказ места» внизу, но мне не нравится, как она выглядит.

2. Я могу сделать кнопку «Заказ места» position: fixed так, чтобы она всегда была прикреплена к нижней части страницы. Однако это толпит экран на мобильных телефонах и немного запутывает, потому что оно будет отображаться всегда, даже до того, как клиент заполнит необходимую информацию для заказа.

3. Я могу создать пустую кнопку в нижней части страницы, которая не содержится ни в какой форме. Затем я могу использовать 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?

В противном случае вы могли бы попытаться установить положение: абсолютное положение кнопки ниже сгиба в нижней части страницы, в отличие от положения: фиксированное. Таким образом, он всегда будет сидеть внизу, а не прокручивать страницу.