gpt4 book ai didi

php - 如何使用 Javascript 定位我的 PHP 联系表单警报消息?

转载 作者:太空宇宙 更新时间:2023-11-04 15:22:23 25 4
gpt4 key购买 nike

定位警报消息时出现问题(您需要填写所有必填字段!!等)无法通​​过 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>

最佳答案

您可以定位警报 <p>wrap 标记获取相关输入并使用 position:relative (到包装器元素)定位消息元素。

因此在您的 JavaScript 验证中:

  1. 确定哪个表单元素应该作为放置消息的提示。
  2. 包装表单元素。
  3. 将警报附加到包装器。

validationWrapper类应避免向目标元素添加填充/边距。它应该只是放置 alert 的起点-分类元素。

以下代码使用了 jQuery JavaScript 库:

$(formElem).wrap("<div class=\"validationWrapper\"></div>");
$(".validationWrapper").append("<p class=\"alert\">"+message+"</p>");
$(".validationWrapper .alert").css({ position: "relative", left: 0, top: "-5em"});

此外, 您的表单很容易受到垃圾邮件发送者的攻击。 To header 应该在服务器端设置。 没关系,没注意到 PHP 标签。

关于php - 如何使用 Javascript 定位我的 PHP 联系表单警报消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14435462/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com