Отправить HTML форму без перенаправления и показывая сообщение об успехе

Question

Я решил перейти с веб-сайта WordPress на самодельный с HTML, CSS и JS, чтобы улучшить производительность. До сих пор, опираясь на учебные пособия, мне удалось справиться практически с каждой проблемой, но я просто не могу заставить работать форму обратной связи так, как она работала в WP. До сих пор он перенаправляет меня на другую страницу, которая показывает сообщение об успехе, которое просто ужасно.

По сути, я хочу, чтобы кнопка отправки делала 3 вещи: 1. Не перенаправлять меня на другую страницу. 2. Сбросьте форму. 3. Покажите сообщение об успехе.

Прочитайте много подобных вопросов здесь, но, поскольку я совершенно незнаком с AJAX, наконец решил опубликовать этот вопрос. Вот мой код:

Индекс. html:

     <div>
        <form method="post" action="form.php" name="myForm">
          <input name="name" placeholder="Nombre" required>
          <input name="email" type="email" placeholder="Correo Electrónico" required>
          <textarea rows="10" name="message" placeholder="Mensaje" required></textarea>
          <input id="submit" name="submit" type="submit" value="Enviar Mensaje" class="boton-rojo">
        </form>
      </div>

и в форме. php:

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="De: $name \n Mensaje: $message";
$recipient = "contacto@mydomainname.cl";
$subject = "Mensaje desde el sitio web";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Tu consulta fue recibida";

?>

Любая помощь будет высоко ценится.

Спасибо.

Answer 1

Введите идентификатор в форму

<form id='myForm'>
....
</form>

Используйте jQuery (для простого кода)

   ....
   <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
</body>

Используйте $. ajax

$('#myForm').submit(function(e) {

   e.preventDefault(); // prevent from submitting form directly

   $.ajax({
     url: 'form.php',
     method: 'post',
     data: $("#myForm").serializeArray() // convert all form data to array (key:value)
   })
   .done(function(response){
     alert(response); // show the response
     $("#myForm").reset(); // reset the form
   })
   .fail(function(error){
     alert(error); // show the error.
   });

})