@Andrey_Mirov

Как отправить форму без перезагрузки страницы?

Всем, привет. Ребят, подскажите, пожалуйста.

Есть у меня такая форма обратной связи
<form action="<?=POST_FORM_ACTION_URI?>" name="form" id="form">
	<label>Имя</label>
	<input type="text"  name="person_name">
	
	<label>Сообщение</label>
	<textarea name="message"></textarea>

	<input type="submit" class="btn" value="Отправить">
</form>


Обработка ее идет через ajax + Jquery.

<script>
	$('#form').on('submit', function(e){
		e.preventDefault();	
		var that = this;
		$.ajax({
			type: 'POST',
			url: '/ajax/form_send.php',
			data: $("#form").serialize(),
			dataType: 'json',
			success: function(result){
				if (result.status=='success'){
					$(that).hide();
				}else{
					if (!result.message_name) {
						\\выводим ошибку			
					}else{
						\\убираем ошибку		
					}
					if(!result.message_text){
						\\выводим ошибку
					}else{
						\\убираем ошибку		
					}
				}
			}
		});     
	});
</script>


И ajax

<?
if(!empty($_REQUEST['person_name']) && !empty($_REQUEST['message'])){
	$result['status'] = 'success';
	$result['message'] = 'Ваше сообщение отправлено';
}else{
	if(empty($_REQUEST['person_name'])){
		$result['message_name'] = false;
	}else{
		$result['message_name'] = true;
	}

	if(empty($_REQUEST['message'])){
		$result['message_text'] = false;
	}else{
		$result['message_text'] = true;
	}
	$result['status'] = 'error';
	$result['message'] = 'Ошибка';
};

echo json_encode($result);
?>


Проблема вот в чем. Если человек отправляет форму - без ошибок - с первого раза - она спустся несколько секунд на почту падает.
Но если человек заполнил форму, нажал самбит - не заполнил обязательное поле - вышла ошибка - он поправил - отправил форму.
И сообщение из этой формы, в этом случае, приходит только после того как была перезагружена страница.
В первом случае работает корректно.

Не могу понять в чем проблема. В ajax.php или в скрипте.
  • Вопрос задан
  • 170 просмотров
Пригласить эксперта
Ответы на вопрос 2
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
1) не уверен, но возможно вы не тот скрипт вызываете из Аякса.
2) в представленном коде нет отправки на емейл.(именно это наталкивает на мысль что это не тот скрипт)
3) нормальной практикой считается поставить обязательным полям рекуиред, это упрощает логику жс.
Ответ написан
Whiled0S
@Whiled0S
Lazy frontend
Просто уберите action у формы и используйте для POST-запроса fetch API, это будет и без перезагрузки, и проще. Повесьте на кнопку обработчик события клик, в нем просто будете доставать нужные данные из формы, после чего использовать fetch и засовывать эти самые данные в body запроса. На сервере уже пишите нужную обработку данных.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы