показать спасибо сообщение при отправке - PullRequest
Новая
       21

показать спасибо сообщение при отправке

0 голосов
/ 01 декабря 2018

Здравствуйте. Я пытаюсь получить в моей контактной форме сообщение с благодарностью после того, как оно было отправлено.

Я оглянулся, но вещи, которые я нахожу, выглядят более сложными, чем я думаю, что мне нужно.

Я думаю, что мне чего-то не хватает в слушателе событий и в том, как работает эта форма.

Вот мой код: 

  
.thanks {
  display: none;
  }
   <div class="form-wrap">
    <form class="contact-form" action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" method="post">
      <!-- all your input fields here.... -->
      <div class="name-email">
          <input class="contact-field contactform-name" type='text' name='name' placeholder="Name" required/>
          <input class="contact-field contact-form-email" type="email:" name="email" placeholder="e-mail" value="" required>
      </div>

      <textarea class="contact-field" name="message" rows="20" cols="80" placeholder="Your Message" required></textarea>

      <input class="contact-field submit" type='submit' value='Send' />

    </form>
  </div>
  <div  class="thanks">
    <h1>Thanks for the message!</h1>
  </div>
  <script>
    function displayThanks() {
    document.querySelector(".thanks").style.display = "block";
    document.querySelector(".contact-form").style.display = "none";
  }
  document.querySelector(".submit").addEventListener("submit", displayThanks)
  </script>

Я мог бы заставить его работать по клику, но это означало бы, что даже если они не отправят сообщение и просто нажмут кнопку отправки, они получатспасибо (ЗА ЧТО!?)

Спасибо!

М

1 Ответ

0 голосов
/ 01 декабря 2018

Вы смешиваете логику на стороне клиента с логикой на стороне сервера.Трудно ответить на ваш вопрос, потому что мы не знаем, что делает действие "action =" https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" в вашем теге формы.

Возможно, было бы полезно проверить форму, прежде чем вы решите отправитьЭто.Вы можете сделать это, используя событие нажатия кнопки отправки в сочетании с protectDefault, как это (например, вы можете даже использовать RegEx для электронной почты и прочего): 

document.querySelector(".submit").addEventListener('click', function(e) {
var userInputName = document.getElementsByName("name")[0].value,    
    userInputEmail = document.getElementsByName("email")[0].value,
    userInputMessage = document.getElementsByName("message")[0].value;

if (userInputName.length > 0 && userInputEmail.length > 0 && userInputMessage.length > 0)
{
  document.querySelector(".thanks").style.display = "block";
  document.querySelector(".contact-form").style.display = "none";
}
else
{
e.preventDefault();
}
}, false);

Я бы порекомендовал использовать идентификаторыхотя вместо имен, потому что идентификаторы уникальны и не требуют списка узлов или неоднозначного jQuery.Чем вы можете использовать что-то вроде этого: userInputName = document.getElementById("name").value;

И не забудьте использовать правильный CSS для вашей логики.Нравится: 

.thanks {display: none;}
...