Самая простая отправка формы аяксом:
$('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){…}) надеюсь догадаетесь заменить *** на нужный селектор.