203 views

Волшебный Ajax

Самая простая отправка формы аяксом:

$('form select').on('change', function () {
 var form = $(this).parents('form');
//dataType: 'json',
 $.ajax({
  url: '/путь-на-наш-файл-для-обработки-формы.php',
  type: 'POST',
  data: $(form).serialize(),
  success: function (response) {
   $('#calendar-content').html(response);
  }
 });
return false;
});

Разбираем: Что же тут произошло?

$('form select').on('change', function () {

Вешаем событие изменения на select находящийся в нашей форме. (вешать можно на любое событие, зависит от фантазии)

Самая важная строка передачи данных:

data: $(form).serialize()

Все данные введенные в поля формы передадутся аяксом, за это отвечает .serialize().
Стоит учитывать если мы хотим передать файлы то данная отправка не подойдет, и для файлов нужно написать отдельное условия.(вполне возможно в будущем предоставлю условия)

Чтобы отправить ajax форму с файлами можно воспользоваться такой конструкцией:

var formData = new FormData($('#form-add')[0]); получаем форму
$.ajax({
...
dataType: 'json',
data: formData,
processData: false,
contentType: false,
...
});
// первичная проверка данных
$('input[name="image"]').bind('change', function () {
 var data = new FormData();
 errorAdd = '';
 jQuery.each($('input[name="image"]')[0].files, function (i, file) {
  if (file.name.length < 1) {
   errorAdd = errorAdd + ' Файл имеет неправильный размер! ';
  } //Проверка на длину имени
  if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
   errorAdd = errorAdd + 'Для картинки разрешены только типы: png, jpg or gif';
  } //Проверка типа файлов
  data.append('file-' + i, file);
 });
});

Для проверки заполнения полей можно использовать обычный $(‘***[require]’).each(function(i,item){…}) надеюсь догадаетесь заменить *** на нужный селектор.

This site is using the Seo Wizard wordpress plugin by www.seowizard.org.