Здравствуйте. Имеется форма предшествующая завершению заказа. В ней предлагается либо оформить заказ, либо исправить данные. Внутри формы имеются две кнопки с type="submit". К форме привязан прослушиватель события клик и путем делегирования событий (через event.target) определяет какая из кнопок нажата и либо меняет action= формы (пересылает на страницу исправления), либо меняет код страницы добавляя сообщения для пользователя пока происходит формирование заказа и переход на страницу с оформленным заказом и его номером.
event.preventDefault() - не используется.
Код работает и страницы открываются, но хотелось бы уточнить.
Будет ли во всех основных браузерах правильно срабатывать действие по умолчанию submit формы учитывая, что привязан обработчик к событию? Не нужно ли добавлять в конце каждого условия form.submit() в коде js? Я не добавлял, т.к. считаю, это задублирует submit действие по умолчанию браузера.
Будет ли корректно отрабатывать click на мобильных устройствах? (или стоит продублировать touthstart)?
Правильно ли сделано, что
default: return false;
break;
в случае неудовлетворения условиям, чтобы не срабатывали клики на других элементах кроме этих двух кнопок.
Сокращенный код прикладываю (между ним идут input)
<form name="purchase" id="endForm" action="{{ route('cart.order.complit') }}" method="post">
<button name="backToCorrect" class="btn btn-default" type="submit" form="endForm">Исправить</button>
<button name="goToPurchase" class="btn btn-danger" style="background: red;" type="submit" form="endForm">Подтвердить заказ</button>
Полный код функции и обработчика:
const endText = document.querySelector("#endMessage > h3");
function buyerChoice (event){
let backToCorrect = document.forms.purchase.backToCorrect;
let goToPurchase = document.forms.purchase.goToPurchase;
switch (event.target) {
case backToCorrect:
document.forms.purchase.action = '{{ route('cart.order') }}?mode=correct';
break;
case goToPurchase:
endText.innerText = `Ожидайте. Заказ формируется. Не закрывайте страницу`;
goToPurchase.style.background = `#01b500`;
goToPurchase.innerText = `Заказ формируется`;
backToCorrect.classList.add(`hidden`);
document.querySelector(`.spinner`).classList.remove(`hidden`);
break;
default: return false;
break;
}
};
document.forms.purchase.addEventListener(`click`, buyerChoice);
