JavaScript: Показать элемент в форме после отправки

Question

У меня есть форма, и я хочу показать какой-то контент после того, как кто-то ввел свою электронную почту и отправил форму. Форма должна скрыться, а содержимое должно стать видимым.

Я написал немного JavaScript, но когда мы набираем электронное письмо и отправляем форму, страница обновляется, и форма возвращается к содержанию.

JavaScript, который у меня частично работает для события onClick, однако он еще не завершен:

function myFunction() {
var x = document.getElementById("formhide");
if (x.style.display === "none") {
  x.style.display = "block";
} else {
  x.style.display = "none";
}
}

div {
  width: 200px;
  background: red;
  padding: 30px;
  height: 300px;
}

form {
  margin: 15px;
  position: absolute;
  width: 200px;
  padding: 15px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
}
    

<form id="formhide" method="post">
  <input type="email" name="email-address" required>
  <button onclick="myFunction()">Click Me</button>
</form>

<div>
  <h2>ESKETIT</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia voluptatibus excepturi voluptates ratione aut placeat in maxime obcaecati reprehenderit! Modi provident nulla nostrum obcaecati esse, tempore commodi excepturi quae culpa.</p>
</div>

Кто-то отправит письмо в форму, форма будет скрывать и показывать контент в течение длительного времени.

Answer 1

Есть несколько способов достичь того, что вы хотите. Как правило, AJAX-подобный запрос отправляет данные на сервер через JavaScript, что означает, что вы можете обновить HTML документа после завершения AJAX-запроса.

Один из способов добиться этого с помощью вашего кода - использовать метод fetch() и объект FormData, как показано ниже:

function myFunction(event) {

  /* Prevent button causing default browser submit */
  event.preventDefault();

  /* Get form element */
  const form = document.getElementById('formhide');

  /* Create form data object from form element which contains post data */
  let formData = new FormData(form);

  /* Issue "ajax request" to server. Change /post-to-url to the appropriate 
  url on your server */
  fetch('/post-to-url', {
      body: formData,
      method: "post"
    })
    .then(function() {
      /* When submit successfully completed, hide form */
      form.style.display = "none";

      /* Show success message */
      const successMessage = document.getElementById('success-message');
      successMessage.style.display = 'block';

    })
    .catch(function(error) {
      console.log('Error', error);
    });


}

#success-message {
  display: none;
}

<form id="formhide" method="post">
  <input type="email" name="email-address" required>
  <button onclick="myFunction(event)">Click Me</button>
</form>

<p id="success-message"> Form sent - this is the message that displays after submit </p>

<div>
  <h2>ESKETIT</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia voluptatibus excepturi voluptates ratione aut placeat in maxime obcaecati reprehenderit! Modi provident nulla nostrum obcaecati esse, tempore commodi excepturi quae culpa.</p>
</div>