如何使用Javascript定位我的PHP联系人表单警报消息
How to position my PHP contact form alert message using Javascript?
警告信息定位问题(您需要填写所有必填字段!!)不能通过CSS来实现,因为元素没有任何地方可以获取它们的位置。
任何想法?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/everypage.js"></script>
<meta name="viewport" content="initial-scale=1" />
<link rel="shortcut icon" href="IMG/tabicon/favicon.ico" >
<title> A band </title>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Website';
$to = 'info@example.com';
$subject = 'Hello';
$human = $_POST['human'];
$body = "From: $name'n E-Mail: $email'n Message:'n $message";
if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p class="alert">Your message has been sent!</p>';
} else {
echo '<p class="alert">Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p class="alert">You answered the anti-spam question incorrectly!</p>';
}
} else {
echo '<p class="alert">You need to fill in all required fields!!</p>';
}
}
?>
</head>
<body>
<div id="background">
<div id="wrapper">
<div class="navigation">
<ul id="mainmenu">
<li><a href="index.html">Home</a></li>
<li><a href="band.html">Band</a></li>
<li><a href="news.html">News</a></li>
<li><a href="shows.html">Shows</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="store.html">Store</a></li>
</ul>
</div>
<div class="article">
<div id="logo"></div>
<div class="contacts">
<h1> Contact, booking:</h1>
<p> info@example.com </p>
<p> Tel: +372 58 131 054</p>
</div>
<form method="post" action="contact.php">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
</form>
</div>
</div>
<div class="footer contactfooter">
<p class="bandmembers">content</p>
<p class="signature">content</p>
<ul id="footermenu">
<li><a href="terms.html">Terms of use</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
您可以通过wrap
将相关输入(s)和使用position:relative
(包装器元素)来定位消息元素来定位警报<p>
标记。
在JavaScript验证中:
- 确定哪个表单元素应该作为消息放置的提示。
- 包装表单元素
- 将警告附加到包装器。
validationWrapper
类应该避免为目标元素添加填充/边距。它应该是放置alert
类元素的起始点。
$(formElem).wrap("<div class='"validationWrapper'"></div>");
$(".validationWrapper").append("<p class='"alert'">"+message+"</p>");
$(".validationWrapper .alert").css({ position: "relative", left: 0, top: "-5em"});
同样,你的表单很容易受到垃圾邮件发送者的攻击。没关系,没有注意到PHP的标签To
头应该设置在服务器端。
对于您的问题,我建议您使用jquery进行验证和显示消息。这不仅可以帮助您将消息定位到您想要的位置,还可以为您的消息提供样式选择。使用此链接可以更好地理解
相关文章:
- 如果消息框答案为YES,则用Javascript填写表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如何在提交表单时忽略ajax中的验证规则和消息
- 使用记录保存的消息进行表单验证
- 表单提交没有'如果为空,则不会显示错误消息
- php表单验证n在表单上显示消息3秒钟并淡出
- 如何使用angular js在表单上显示服务器端验证错误消息
- 有角度的ng消息显示ng重复表单上的错误
- 表单验证消息(使用jQuery验证插件)
- 正在使用ng消息验证动态表单
- Jquery.在表单顶部验证错误消息
- 在表单提交后显示消息的方法
- 重置表单后未删除验证消息
- 显示Javascript表单验证消息
- 在jquery幻灯片登录表单上显示消息
- 将ipinfo.io的响应附加到联系人表单消息中
- 表单消息警报
- JQuery表单消息验证
- Phonegap联系人表单:如何在html中使用Phonegap发送联系人表单消息
- JavaScript确认表单消息