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”在做什么。

在考虑提交表单之前，对表单进行验证可能会很有用。您可以通过将Submit按钮的click事件与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;}

在提交时显示感谢消息

1 个答案: