css - 在提交时显示感谢信息
问题描述
您好,我正在尝试让我的联系表在消息发送后显示感谢消息。
我环顾四周,但我发现的东西看起来比我认为我需要的更复杂。
我认为这是我对事件侦听器以及此表单的工作方式所缺少的东西。
这是我的代码:
.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>
我可以让它在点击时工作,但这意味着即使他们不发送消息而只是点击提交,他们也会得到感谢(为了什么!?)
谢谢!
米
解决方案
您正在将客户端逻辑与服务器端逻辑混合。很难回答您的问题,因为我们不知道您的表单标签中的“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;}
推荐阅读
- .net-6.0 - .Net 6 不在 Visual Studio TFM 中显示,
- vb.net - VB.Net Soap Service 更新 Windows AzureActiveDirectory Bearer Authentication 如何更新客户端 Proxy (SoapHttpClientProtocol) beaer token
- php - 在 PHP while 循环中遍历数组
- vb.net - 阻止 TextBox 中断滚动
- ios - APNS - 连接到 Apple Notification Server 成功,但设备没有收到通知?
- javascript - 在javascript中访问函数外的单选按钮值
- makefile - 访问 gnu make 选项
- arduino - 红外传感器控制避免黑线,Arduino Nano
- websocket - AWS API Gateway 没有立即回复
- c# - 如何更改 Mac 地址?