Отправка данных из формы обратной связи без перезагрузки.

Было ли когда-нибудь, что вы заполни форму обратной связи, и когда нажимали отправить, у вас перезагружалась страница? Я уверен что было. Но согласитиесь, было бы намного круче, если бы страница не перезагружалась а просто показало сообщение спасибо, например.

Короче говоря, не будут разводить воду и просто поделюсь с вами ссылочкой на gitHub — проект, где лежит форма обратной связи без перезагрузки

Ну и конечно продублирую код тут
HTML:

<!DOCTYPE html>
<html>
<head>
  <title>DenysPopov. Website development and support</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="script.js"></script>
</head>
<body>
<form action="/send.php" method="POST">
  <label for="name">Name*</label>
  <input type="text" name="name" id="name">
  <label for="messanger-contact">Phone number or nickname in the messenger*</label>
  <input type="text" name="messanger-contact" id="messanger-contact">
  <label for="messanger">The name of the messenger</label>
  <input type="text" name="messanger" id="messanger">
  <label for="message">Message*</label>
  <textarea name="message" id="message"></textarea>
  <input type="hidden" name="antispam" >
  <button type="submit" name="button">Send Message</button>
</form>

PHP:

/* set variables */
$name = htmlspecialchars($_POST["name"]);
$messangerContact = htmlspecialchars($_POST["messanger-contact"]);
$messanger = htmlspecialchars($_POST["messanger"]);
$message = htmlspecialchars($_POST["message"]);

/* Your address and subject line */
$address = "popovdenys.web@gmail.com";
$sub = "Сообщение с сайта denyspopov.com";

/* form format */
$mes = "Сообщение с сайта denyspopov.com.\n
Name: $name 
Messanger Contact: $messangerContact
Messanger: $messanger
Message: $message";

/* send message use mail()  */
$from = ('From:<'. $address .'> ');
  
if (mail($address, $sub, $mes, $from)) {
    header('Refresh: 5; URL=https://denyspopov.com');
    echo 'ok';}
else {
    header('Refresh: 5; URL=https://denyspopov.com');

JavaScript:

let button = document.querySelector('button');

/*add event on the send button*/
button.addEventListener('click', function(event) {
  event.preventDefault();
/*create object*/
  let formData = {
    name: document.querySelector('#name').value,
    messangerContact: document.querySelector('#messanger-contact').value,
    messanger: document.querySelector('#messanger').value,
    message: document.querySelector('#message').value
  }

 /*transmit data*/ 
  let request = new XMLHttpRequest();

  request.open('POST', "send.php")
  request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
  request.send('name=' + encodeURIComponent(formData.name) + '&messangerContact=' + encodeURIComponent(formData.messangerContact) + '&messanger=' +  encodeURIComponent(formData.messanger) + '&message=' +    encodeURIComponent(formData.message))
})

Если у вас будут вопросы, оставляйте комменты, буду рад ответить.
Так же подписывайтесь на мой телеграм-канал, чтобы всегда быть вкурсе новых статей 🙂

Оставьте ответ

comment-avatar

*