Суть задания была в том, что бы сделать всплывающее окно в OpenCart, где пользователь мог бы сделать заказ собственного изделия. После того как он ввёл свои данные и описания изделия в форму и нажал кнопку «отправить», вся форма автоматически зачищалась, а пользователю выдавало сообщение об успешной отправке формы с его данными. Но в задании была 1 загвоздка: вместе с данными пользователя, нужно было ещё передавать прикреплённые им файлы (изображения).

1

Так как функции «jQuery.ajax()» и «jQuery.post()» не поддерживают передачу формы с параметром enctype=»multipart/form-data» нужно было придумать вариант передачи формы, без перезагрузки страницы.

  1. Вариант – это использование iframe для всплывающего окна, но от него я быстро отказался. Проблема iframe была в том, что для него нужно обязательно указывать высоту, а делать резиновый iframe накладно.
  2. Вариант – это только передача по ajax.

После недолгого поиска в Google, я наткнулся на 1 интересный плагин «jQueryFormPlugin» (http://malsup.com/jquery/form/) который позволял отправлять форму с параметром enctype=»multipart/form-data» через ajax.

Теперь дело оставалось за малым – написать код.

HTML формы:

Рассмотрим детально js код:

Параметр dataType: ‘json’ – нужен, что бы определить какой тип ответа нам приходит.

Параметр beforeSubmit: — функция которая выполняется перед отправкой формы. В ней мы зачищаем ответы от сервера $(‘#bid_info .success, #bid_info .warning’).remove();

, если таковы есть. Делаем неактивную кнопку отправки формы $(‘#button-bid’).attr(‘disabled’, true);, что бы пользователь, не тыкал на неё, по несколько раз. И выводим сообщение, что форма на данный момент отправляется «Пожалуйста подождите…».

2

 

Параметр success: — Функция, которая выполняется, при успешной отправки формы. В ней мы опять делаем активную кнопку отправки $(‘#button-bid’).attr(‘disabled’, false);. Убираем наше сообщение «Пожалуйста подождите…» — $(‘#bid_info .attention’).remove();. Теперь делаем проверку на присутствие ошибок:

3

Если же у нас присутствует ошибка, то мы выводим её перед формой. После чего делаем проверку на отправку формы:

Тут мы возвращаем сообщение о том, что наша форма успешно передана и очищаем все наши поля форме

До отправки

4

После отправки

5

В PHP присутствует обычная проверка полей и вывод json ответа с параметрами «error» и «success».

Пример кода:

 

В итоге мы получили всплывающее окно с формой передачи данных и изображений по ajax на OpenCart’е