Как-то, работая над переносом интернет-магазина «Климатик» на новый движок с сохранением оригинального дизайна, столкнулся я с задачей реализации сабмита одной формы на разные обработчики, в зависимости от того, какая из имеющихся в форме кнопок submit была кликнута.
Предвосхищая шквал вопросов «зачем такое вообще надо?» сразу поясню: есть форма содержимого корзины покупателя, с перечнем заказанного товара. Механизм добавления товара в корзину работает таким образом, что по клику на ссылке «добавить в корзину», асинхронным AJAX-запросом на сервер отправляется id выбранного товара. И больше ничего.
В этом есть свои прелести — клиенту не приходится заполнять форму с указанием количества заказываемого товара и пр. Кликнул и пошел себе дальше. НО! Надо же дать пользователю возможность указать сколько единиц какого товара он хочет купить!
В старом движке это было вынесено на страницу просмотра (и редактирования) содержимого корзины. Колонка с количеством товара являла собой поле ввода, где по умолчанию стояла единичка. Покупатель либо кликал кнопку «Оформить заказ» внизу списка товаров, если количество «по одной штуке» его устраивало, либо исправлял количество товаров и кликал кнопку «Пересчитать», рядом с кнопкой «Оформить заказ», для пересчета стоимости товаров в корзине и общей суммы заказа.
Так сложилось, что обработчики пересчета корзины, с исправлением количества заказанного наименования товара и обработчик непосредственно заказа этого товара были разные. Т.е. в зависимости от нажатой кнопки, форма должна была отсылаться разным обработчикам на сервере. КОНЕЧНО же, можно было сделать это в одном обработчике и обойтись без головной боли, которая поджидала меня на следующем шаге, но для одного обработчика и сабмита достаточно одного. А тогда реакция на его нажатие будет неочевидной для посетителя, а это уже не есть хорошо с точки зрения юзабилти.
Конечно, можно было забить на логику работы и оставить две, РАВНОЦЕННЫЕ кнопки submit, назвав их по-разному. Ну и в зависимости от ситуации, программировать разную реакцию обработчика на их нажатие. Как это было в оригинальной редакции движка сайта. Там кнопок submit было вообще три («Пересчитать», «Удалить отмеченные» и «Оформить заказ» и обработчик смотрел что поменялось в форме и в зависимости от этого предпринимал некоторые действия). Но это неправильно, как по мне. И я решил сделать по-своему. Удаление я вынес отдельной ссылкой напротив каждой товарной позиции. А вот пересчет и оформление заказа оставил кнопочками. Но при попытке с помощью JavaScript установить свойство «action» для формы с последующим сабмитом формы (document.form_name.submit();) у меня возникала ошибка, сообщающая что метод submit неприменим для указанного объекта. Вот те раз!
Тут следует упомянуть, что при работе я чуток изменил подход и, вместо двух кнопок SUBMIT, я сделал одну кнопку типа SUBMIT и одну кнопку типа BUTTON. И вот для нее то я и получал это сообщение. Долго ломал голову почему так. Ответ, как говорится, лежал на поверхности. Правда наткнулся я на него не логическим, а чисто эмпирическим путем. Я попробовал поменять тип для работающей кнопки SUBMIT на BUTTON, чтобы сделать максимально похожими оба варианта и посмотреть останется ли работоспособным работающий вариант, или нет. Поменял. Все осталось работающим. Мало того — заработала вторая, неработающая кнопка! После проверочных экспериментов стало ясно, что:
если у некоей формы в коллекции существует объект (кнопка) типа «SUBMIT», вызвать для этой формы из JavaScript метод submit() невозможно.
Наверное из-за совпадения названий. Как бы то ни было, решение имеется: уберите SUBMIT’ы, используйте исключительно объекты типа BUTTON и юзайте событие OnClick (или другое удобное) и будет Вам счастье.
Похожие записи
Нет комментариев
Оставить комментарий или два