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

Отправка Ajax-формы с прикреплёнными файлами

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

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

После недолгого поиска в Google я наткнулся на 1 интересный плагин « jQuery Form Plugin » (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); , что бы пользователь, не тыкал на неё, по несколько раз. И выводим сообщение, что форма на данный момент отправляется «Пожалуйста подождите…».

Отправка Ajax-формы с прикреплёнными файлами

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

 

Отправка Ajax-формы с прикреплёнными файлами

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

 

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

До отправки:

Отправка Ajax-формы с прикреплёнными файлами

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

Отправка Ajax-формы с прикреплёнными файлами

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

Пример кода:

 

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