@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 или в скрипте.
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 3
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
1) не уверен, но возможно вы не тот скрипт вызываете из Аякса.
2) в представленном коде нет отправки на емейл.(именно это наталкивает на мысль что это не тот скрипт)
3) нормальной практикой считается поставить обязательным полям рекуиред, это упрощает логику жс.
Ответ написан
Whiled0S
@Whiled0S
Lazy frontend
Просто уберите action у формы и используйте для POST-запроса fetch API, это будет и без перезагрузки, и проще. Повесьте на кнопку обработчик события клик, в нем просто будете доставать нужные данные из формы, после чего использовать fetch и засовывать эти самые данные в body запроса. На сервере уже пишите нужную обработку данных.
Ответ написан
ProjectSoft
@ProjectSoft
Front-end && Back-end разработчик
Из сабмита должен вернуться результат false.

Рабочий код
<?
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'):
	header("Content-type: application/json; charset=utf-8");
	
	$result = new stdClass();
	$result->status = 'error';
	$result->message = 'Ошибка';
	
	if(!empty($_REQUEST['person_name']) && !empty($_REQUEST['message'])):
		$result->status = 'success';
		$result->message = 'Ваше сообщение отправлено';
	else:
		$result->message_name = !empty($_REQUEST['person_name']);
		$result->message_text = !empty($_REQUEST['message']);
	endif;
	
	echo json_encode($result);
	exit();
endif;
?>
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<div class="message"></div>
		<form action="/" name="form" id="form" method="POST">
			<label>
				Имя<br>
				<input type="text"  name="person_name">
			</label>
			<br>
			<label>
				Сообщение<br>
				<textarea name="message"></textarea>
			</label>
			<input type="submit" class="btn" value="Отправить">
		</form>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
		(function($){
			$('#form').on('submit', function(e){
				e.preventDefault();
				$(".message").empty();
				var that = this,
					message = [];
				$.ajax({
					type: that.method,
					url: that.action,
					data: $("#form").serialize(),
					dataType: 'json',
					success: function(result){
						if (result.status=='success'){
							$(".message").text(result.message);
							$(that).hide();
						}else{
							(!result.message_name) && message.push('Не заполнено Имя');
							(!result.message_text) && message.push('Не заполнено Cообщение');
							$(".message").html(message.join('<br>'));
						}
					}
				});
				return !1;
			});
		}(jQuery));
		</script>
	</body>
</html>

Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы