Блог

Главная - Вопросы по программированию - Как получить благодарность после заполнения формы?

Как получить благодарность после заполнения формы?

#javascript #html

#javascript #HTML

Вопрос:

Итак, я пытаюсь получить сообщение «спасибо» вместо формы, которую я создал на HTML. Я хочу получить сообщение с благодарностью, только если пользователь предоставил все свои данные и все остальное.

Вот мой HTML:

 <div class = "form">
        <form>
            <!-- Name -->
            <label class = "firstName">First name</label><br>
            <input type="text" placeholder = "John" required = "required" pattern="[A-Za-z].         {1,20}" id = "firstName"><br>
            <label class = "lastName">Last name</label><br>
            <input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
            <!-- Email -->
            <label class = "email">Email</label><br>
            <input type= "email" placeholder = "j.appleseed@example.co.uk" size = "42" required = "required" id = "email"><br>
            <!-- Mobile Number -->
            <label class = "tel">Mobile Number</label><br>
            <input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
            <!-- The Submit button -->
            <button class = "submit" onclick="revealMessage()">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>
            <h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
        </form>
   </div>

Javascript:

 function revealMessage()
    {
    document.getElementById("hiddenMessage").style.display = "block";
    document.getElementsByClassName("form").style.display = "none";
    }

Ответ №1:

  1. getElementsByClassName — множественное число. Вам нужно добавить [0] к результату или лучше, не используйте его
  2. Вы хотите получить доступ к событию отправки — просто скрывая форму при нажатии кнопки, вы не отправляете форму, а также не запускаете проверку
  3. У вас тоже была ошибка в вашем шаблоне для первого имени
  4. Когда вы скрываете div формы, содержимое тоже будет скрыто
  5. Возможно, вы захотите использовать AJAX, поскольку форма удаляет страницу при отправке — с помощью Ajax вы можете вернуть благодарность с сервера

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

 document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // pause submission
  document.getElementById("hiddenMessage").style.display = "block";
  document.getElementById("formDiv").style.display = "none";
  setTimeout(function() {
    e.target.submit()
  }, 2000)
}) 
 <div class="form" id="formDiv">
  <form id="myForm">
    <!-- Name -->
    <label class="firstName">First name</label><br>
    <input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br>
    <label class="lastName">Last name</label><br>
    <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
    <!-- Email -->
    <label class="email">Email</label><br>
    <input type="email" placeholder="j.appleseed@example.co.uk" size="42" required="required" id="email"><br>
    <!-- Mobile Number -->
    <label class="tel">Mobile Number</label><br>
    <input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br>
    <!-- The Submit button -->
    <button type="submit" class="submit">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>
  </form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Комментарии:

1. Привет! Я попытался реализовать код, который вы дали, и хотя он просит меня написать все в форме, когда я нажимаю отправить после написания всех вещей, страница просто перезагружается, и я не получаю сообщение «спасибо».

2. Извините, я не переместил ваш H1 за пределы DIV. Теперь я позволяю пользователю просматривать сообщение в течение 2 секунд перед фактической отправкой

Ответ №2:

Вместо:

 document.getElementsByClassName("form").style.display = "none";

Используйте querySelector:

 document.querySelector(".form").style.display = "none";

Кроме того, переместите свой hiddenMessage div за пределы формы, чтобы он не был скрыт формой при отправке.

Смотрите фрагмент ниже:

 function revealMessage() {
  document.getElementById("hiddenMessage").style.display = "block";
  document.querySelector(".form").style.display = "none";
} 
 <div class="form">
  <form onsubmit="revealMessage()">
    <!-- Name -->
    <label class="firstName">First name</label><br>
    <input type="text" placeholder="John" pattern="[A-Za-z].         {1,20}" id="firstName" required><br>
    <label class="lastName">Last name</label><br>
    <input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1,20}" id="lastName" required><br>
    <!-- Email -->
    <label class="email">Email</label><br>
    <input type="email" placeholder="j.appleseed@example.co.uk" size="42" id="email" required><br>
    <!-- Mobile Number -->
    <label class="tel">Mobile Number</label><br>
    <input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br>
    <!-- The Submit button -->
    <button type="submit" class="submit">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>

  </form>
</div>

<h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Комментарии:

1. Привет! Спасибо за ответ. Но проблема в том, что даже если пользователь не вводит всю необходимую информацию в форму, форма отправляется, и вы получаете благодарность. Я хочу, чтобы, если формы заполнены по шаблону, указанному в HTML, он должен быть отправлен. Еще раз спасибо.

2. Ваш код вообще не отправляет форму. Он просто скрывает это

3. Смотрите мой обновленный фрагмент. Если вы хотите, чтобы ваши обязательные поля работали, запустите функцию onsubmit revealMessage вместо onclick .

4. noll-demo.squarespace.com/consultations Это тип вещей, которые я хочу реализовать в своем коде. Когда я нажимаю отправить на этой странице, она скрывает форму и говорит спасибо, но только если я указал все детали

5. Обновленный код будет работать именно так.

Ответ №3:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit

В javascript есть событие onsubmit, когда вы отправляете, вы можете предупредить или сделать то, что подходит you 

 <div class="form">
  <form onsubmit="myFunction()">
    <!-- Name -->
    <label class="firstName">First name</label><br>
    <input type="text" placeholder="John" required="required" id="firstName"><br>
    <label class="lastName">Last name</label><br>
    <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
    <!-- Email -->
    <label class="email">Email</label><br>
    <input type="email" placeholder="j.appleseed@example.co.uk" size="42" required="required" id="email"><br>
    <!-- Mobile Number -->
    <label class="tel">Mobile Number</label><br>
    <input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br>
    <!-- The Submit button -->
    <button class="submit">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>

  </form>
</div>

<h1 id="hiddenMessage" style="display: none">Thank You!</h1>

<script>


function myFunction() {
  alert("The form was submitted");
}
 </script>

Комментарии:

1. Пожалуйста, либо расширьте это, в ответ… Или, что менее предпочтительно, оставьте это в качестве комментария. Поскольку на данный момент это действительно не полный ответ.

2. Привет! Спасибо за ответ. Но проблема в том, что даже если пользователь не вводит всю необходимую информацию в форму, форма отправляется, и вы получаете благодарность. Я хочу, чтобы, если формы заполнены по шаблону, указанному в HTML, он должен быть отправлен. Еще раз спасибо.