Отменить отправку формы по enter. Отправление Ajax запроса

Автор: Oleksandr Kostiuk 3505 0 комментариев

Иногда нужно переделать стандартное поведение элементов HTML документа. Ну и так уже сложилось что заказчик хочет чтоб страница не перегружалась. Стандартно валидация введеных даных проводится методами JavaScript, Jquery и т.д. тоесть на стороне клиента. Но что нужно делать когда нужно провести сложную валидацию с обращением в БД? В помощь разработчику приходит Ajax запрос. Что делаем: 1) проверяем нажат ли в форме enter 2) отправляем запрос 3) принимаем и разбираем ответ 4) запрещаем выполнение стандартного поведения.

$(document).ready(function(){//когда документ подгружен
	$('#form_id').keydown(function(event){ // при нажатии в форме с id="form_id" клавиши enter
	if(event.keyCode==13){//код enter
	//если нужно отправить  Ajax запрос
		var OurUrl='/testfolder/test_file.php';//путь к файлу в котором будут производится проверки
		var options=[];//обьявим масив
		$.each($("input[type=checkbox]:checked"),function(){
		    options.push($(this).attr('name'));//наполняем масив полями "name" отмеченых checkbox(например)
		});
		$.ajax({
			type: 'POST',//определяем метод запроса
			data:{data : options},//данные для передачи
			url: OurUrl,
			success: function (data) {//при успешном выполнении
					$('#response_container').html(data);//записать ответ в элемент с id="response_container"
					//или когда пришла не распарсеная строка
					var obj = JSON.parse(data);//распарсим
					if (obj.STATUS=='OK'){//проверка
							$('.adm-info-message-green').show();//какие-то действия
					}else{
							$('.adm-info-message-red').show();//какие-то действия
					}
			}
		});
		//конец вызова
	 event.preventDefault();//отменить стандартные действия
	 return false;
	}
 });
});

Блог