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