在提交时显示感谢信息

Question

您好，我正在尝试让我的联系表单在消息发送后显示感谢消息。

我环顾四周，但我发现的东西看起来比我认为我需要的要复杂。

我认为这是我对事件侦听器以及此表单的工作方式所缺少的东西。

这是我的代码：

.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>

我可以让它在点击时工作，但这意味着即使他们不发送消息而只是点击提交，他们也会得到感谢（为了什么！？）

谢谢！

M

Answer 1

您正在混合客户端逻辑和服务器端逻辑。很难回答您的问题，因为我们不知道您的表单标签中的“action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" 操作在做什么。

在考虑提交之前验证表单可能会很有用。你可以通过使用提交按钮的点击事件和这样的 preventDefault 来做到这一点（只是一个例子，你甚至可以将 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);

我建议使用 ID 而不是名称，因为 ID 是唯一的，不需要节点列表或模棱两可的 jQuery。比你可以使用这样的东西：userInputName = document.getElementById("name").value;

不要忘记为您的逻辑使用正确的 CSS。喜欢：

.thanks {display: none;}