@LOLIK777

Как отправить данные без перезагрузки страницы и использования action в form?

Не получается отправить данные формы на почту, если у меня в html в поле form не прописано action="mail.php". Если прописано, форма отправляется, но и страница переходит на новую пустую страницу. Вместо этого, мне просто необходимо чтобы отправилась форма и появилось окошко на прежней страницы что данные отправлены.
Прилагаю код.
<form class="message__form" action="mail" method="post">
        <!-- Hidden Required Fields -->
      		<input type="hidden" name="project_name" value="Site Name">
      		<input type="hidden" name="admin_email" value="......@gmail.com">
      		<input type="hidden" name="form_subject" value="Form Subject">
    		<!-- END Hidden Required Fields -->
        <p>
          <label class="visually-hidden" for="name">Ваше имя</label>
          <input class="name" id="name" type="text" name="name" value="" placeholder="Ваше имя" required>
        </p>
        <p>
          <label class="visually-hidden" for="phone">Ваше телефон</label>
          <input class="phone" id="phone" type="text" name="phone" value="" placeholder="Ваше телефон" required>
        </p>
        <button class="button-send button" type="submit" name="button">Отправить</button>
      </form>

$("form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "./mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Thank you!");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

<?php
$method = $_SERVER['REQUEST_METHOD'];
//Script Foreach
$c = true;
if ( $method === 'POST' ) {
	$project_name = trim($_POST["project_name"]);
	$admin_email  = trim($_POST["admin_email"]);
	$form_subject = trim($_POST["form_subject"]);
	foreach ( $_POST as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
} else if ( $method === 'GET' ) {
	$project_name = trim($_GET["project_name"]);
	$admin_email  = trim($_GET["admin_email"]);
	$form_subject = trim($_GET["form_subject"]);
	foreach ( $_GET as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
}
$message = "<table style='width: 100%;'>$message</table>";
function adopt($text) {
	return '=?UTF-8?B?'.Base64_encode($text).'?=';
}
$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;
mail($admin_email, adopt($form_subject), $message, $headers );


Спасибо!
  • Вопрос задан
  • 1352 просмотра
Пригласить эксперта
Ответы на вопрос 1
pligin
@pligin
быдлокодер
js использует url, а не пути файлов как php. У тебя адрес получается https://site/this/./mail.php
В отправке данных должен быть url
url: "https://site/mail.php"
или
url: "/mail.php" - это от корня домена, т.е. будет использован https://site/mail.php
или
url: "mail.php" - будет использовано текущее расположение. https://site/this/mail.php
И не забывай, что многие отключают js и для них нужно использовать стандартный post или get. Поэтому action тебе в этом понадобится. В url парсишь action формы и отправляешь туда данные, а если js отключен, то работает обычная форма.
Как буду у компьютера напишу тут простую функцию jQuery для отправки любой формы на сайте.
mail.php
<?PHP
if(!empty($_POST)){
    if($_POST['ajax'] == 1){//получили данные от JS, значит нужно вернуть JSON
        echo json_encode(array(
            'type' => 'success',
            'title' =>'Данные получены',
            'message' =>'Ваше имя '.$_POST['name'].', а телефон  '.$_POST['phone'].';)'));
    }else{
        echo 'Данные отправили';
        echo '<pre>';
        var_dump($_POST);
        echo '</pre>';
    }
}else{
    echo 'Данных нет';
}

function.js - одна функция для отправки всех форм ;)
$('form').submit(function() {
        var url = $(this).attr('action');
        var data = $(this).serialize()+'&ajax=1';
        $.post(url, data, function(result){
            console.log(result);
            swal(result.title, result.message, result.type)
        }, 'json');
        return false;
    });

index.html
<!DOCTYPE html>
<html lang="ru">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<link href="style.css" rel="stylesheet" type="text/css">
	<title>Форма</title>
</head>
<body>

<form class="message__form" action="mail.php" method="post">
        <!-- Hidden Required Fields -->
      		<input type="hidden" name="project_name" value="Site Name">
      		<input type="hidden" name="admin_email" value="......@gmail.com">
      		<input type="hidden" name="form_subject" value="Form Subject">
    		<!-- END Hidden Required Fields -->
        <p>
          <label class="visually-hidden" for="name">Ваше имя</label>
          <input class="name" id="name" type="text" name="name" value="" placeholder="Ваше имя" required>
        </p>
        <p>
          <label class="visually-hidden" for="phone">Ваше телефон</label>
          <input class="phone" id="phone" type="text" name="phone" value="" placeholder="Ваше телефон" required>
        </p>
        <button class="button-send button" type="submit" name="button">Отправить</button>
      </form>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="functions.js"></script>
</body>
</html>

5d14fff38544b682702524.png
Ошибка Ваша в том, что Вы не подключили jQuery и поэтому Ваша функция отправки не работала.
При появлении вопросов можете смело писать на моем форуме PSWeb.ru
Ваша форма в работе https://lolik777.psweb.ru/
Ответ написан
Ваш ответ на вопрос

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

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