<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript">
document.getElementById("errorbox").style.display = "none";
document.getElementById("erbox").style.display = "none";
$("#submit").click( function() {
alert('working');
$("#errorbox").css("display","");
$("#erbox").css("display","");
$("#errorbox").html(<?php echo $error.$successMessage; ?>);
});
</script>
body {
margin : 0;
padding : 0;
background-image : url('196-1963826_abstract-color-wallpaper-hd.jpg');
background-position : center;
background-repeat : no-repeat;
background-size : fit;
}
.container {
width : 500px;
height : 650px;
background-image : url('photo-1525847185619-02460ddde30d.jpg');
text-align : center;
postion : relative;
margin-left : 30%;
color : #ffffff;
}
h1 {
font-size : 50px;
margin-top : 50px;
padding-top : 20px;
padding-bottom : -10px;
}
h4 {
position : relative;
margin-top : -30px;
}
.email {
margin-top : 100px;
font-size : 25px;
font-weight : bold;
}
.textholder {
width : 50%;
padding : 7px;
border-radius : 30px;
align : text-align;
}
h6 {
font-size : 15px;
margin-top : 3px;
color:#00ffff;
}
.subject {
margin-top : -05px;
font-size : 25px;
font-weight : bold;
}
.ftr {
margin-top : 50px;
font-size : 25px;
font-weight : bold;
}
.texta {
width : 400px;
}
.submit {
padding :5px;
width : 80px;
color : #1c8adb;
border-radius : 20px;
margin-top : 40px;
}
.submit:hover {
padding :5px;
width : 80px;
color : #ffffff;
background-color : #1c8adb;
border-radius : 20px;
margin-top : 40px;
}
footer {
background-color : #FFA500;
padding : 20px;
margin-left : -10px;
width : 100%;
height : 40px;
position : relative;
margin-top : 50px;
margin-bottom : -10px;
}
.contact {
float : right;
margin-right : 15px;
font-weight : bold;
margin-bottom : 10px;
}
.bgrnd {
float : left;
margin-left : 100px;
font-weight : bold;
}
.spnsr {
float : left;
margin-left : 100px;
font-weight : bold;
margin-bottom : 10px;
}
.imag {
position : absolute;
z-index : 1;
margin-bottom : 10px;
padding-bottom : 10px;
}
.ui-dialog {
color : #ffffff;
background-color : #808080;
padding-left : 20px;
border : 4px solid #0000ff;
}
#errorbox {
width : 350px;
height : 400px;
padding : 20px;
background-color : #fff;
position : absolute;
z-index : 0.5;
margin-top : 50px;
margin-left : 50px;
border : 6px solid grey;
font-family : viner hand itc;
}
.erbtn {
position : absolute;
float: right;
margin-left : 320px;
margin-top : 435px;
z-index : 1;
}
#errorbtn {
width : 100px;
height : 30px;
padding : 5px;
border : 2px solid grey;
font-weight : bold;
}
<?php
$error = ""; $successMessage = "";
if ($_POST) {
if (!$_POST["email"]) {
$error .= "An email address is required.<br>";
}
if (!$_POST["content"]) {
$error .= "The content field is required.<br>";
}
if (!$_POST["subject"]) {
$error .= "The subject is required.<br>";
}
if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "The email address is invalid.<br>";
}
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' . $error . '</div>';
} else {
$emailTo ="[email protected]";
$subject = $_POST['subject'];
$content = $_POST['content'];
$headers = "From: ".$_POST['email'];
if (mail($emailTo, $subject, $content, $headers)) {
$successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
} else {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="logo_S0a_2.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css" rel="stylesheet">
<!-- using internal css -->
</style>
<title>
Contact Form- Gentlemens' Idea
</title>
</head>
<body>
<div class="container">
<header>
<h1>Contact Us</h1>
<h4>Send Us Your Queries<h4>
</header>
<div id="errorbox"><? echo $error.$successMessage; ?>
</div>
<p class="erbtn" id="erbox">
<button type="button" id="errorbtn">okay </button>
</p>
<form>
<div class="email">
<label for="email">Email-Id</label>
<input type="email" class="textholder" id="email" name="email" placeholder="Do care to enter email">
<h6>We'll never share your email with anyone else.</h6>
<br> </div>
<div class="subject">
<label for="subject">Subject</label>
<input type="text" class="textholder" id="subject" name="subject" placeholder="please care to enter a subject">
<br> </div>
<div class="ftr">
<label for="texta">How would you like our help?</label>
<textarea class="texta" id="content" name="content" rows="8" ></textarea>
</div>
<input type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
<p class="imag">
<img src="logo_S0a_2.ico" alt="logo website" width="100px" height="100px">
</p>
<footer>
<div class="contact">
contact us: +91 7782848946 <br>
or email us at [email protected]
<br> © 2020 Gentlemens' Idea, Inc. All rights reserved.
</div>
<div class="bgrnd">
The image in the background belongs to its copyrighted owner and not me.
</div>
<div class="spnsr" link="blue">
This site is being hosted at ecowebhosting.
site hosting and ip address may change. <br>
For any queries,complaints or updates related to website..
email us at <a href="https://www.gmail.com" target="_blank">[email protected]</a>
</div>
</footer>
</body>
</html> 我知道有错误，因为我是php新手。因此请务必帮助这个可怜的编码器。
我尝试使用juery ui对话框和模式，它们虽然工作正常，但是使用了我使用的CSS代码，它隐藏在后台。所以我需要将其删除。我不知道什么ajax代码可以解决我的问题，所以我也没有使用过。陪审团不起作用。坚果我在另一个网站上工作。请务必也检查一下并检查是否有错误。
假设您正在发布数据，则可以使用$.pst()或$.ajax()。使用AJAX时，最好设置一个脚本以接受发布的数据并向请求返回一些数据。最好也使用JSON来做到这一点，但是您可以使用HTML。
警告
照原样，您的PHP Mail脚本容易受到滥用。没有什么可以阻止僵尸程序滥用它并将SPAM从您的脚本或邮箱发送出去的。考虑添加验证码或其他方法来防止这种情况。
请考虑以下示例。它未经测试，但应与一些小的PHP调整一起使用。
$(function() {
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
url: "email.php",
data: $("form").serialize(),
method: "POST",
dataType: "html",
sucess: function(h) {
var dlg = $("<div>").appendTo("body");
if ($(h).hasClass("alert-success")) {
dlg.attr("title", "Success");
} else {
dlg.attr("title", "Error");
}
dlg.html(h).dialog({
modal: true,
close: function() {
$(this).remove();
}
});
}
});
});
});body {
margin: 0;
padding: 0;
background-image: url('196-1963826_abstract-color-wallpaper-hd.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: fit;
}
.container {
width: 500px;
height: 650px;
background-image: url('photo-1525847185619-02460ddde30d.jpg');
text-align: center;
postion: relative;
margin-left: 30%;
color: #ffffff;
}
h1 {
font-size: 50px;
margin-top: 50px;
padding-top: 20px;
padding-bottom: -10px;
}
h4 {
position: relative;
margin-top: -30px;
}
.email {
margin-top: 100px;
font-size: 25px;
font-weight: bold;
}
.textholder {
width: 50%;
padding: 7px;
border-radius: 30px;
align: text-align;
}
h6 {
font-size: 15px;
margin-top: 3px;
color: #00ffff;
}
.subject {
margin-top: -05px;
font-size: 25px;
font-weight: bold;
}
.ftr {
margin-top: 50px;
font-size: 25px;
font-weight: bold;
}
.texta {
width: 400px;
}
.submit {
padding: 5px;
width: 80px;
color: #1c8adb;
border-radius: 20px;
margin-top: 40px;
}
.submit:hover {
padding: 5px;
width: 80px;
color: #ffffff;
background-color: #1c8adb;
border-radius: 20px;
margin-top: 40px;
}
footer {
background-color: #FFA500;
padding: 20px;
margin-left: -10px;
width: 100%;
height: 40px;
position: relative;
margin-top: 50px;
margin-bottom: -10px;
}
.contact {
float: right;
margin-right: 15px;
font-weight: bold;
margin-bottom: 10px;
}
.bgrnd {
float: left;
margin-left: 100px;
font-weight: bold;
}
.spnsr {
float: left;
margin-left: 100px;
font-weight: bold;
margin-bottom: 10px;
}
.imag {
position: absolute;
z-index: 1;
margin-bottom: 10px;
padding-bottom: 10px;
}
.ui-dialog {
color: #ffffff;
background-color: #808080;
padding-left: 20px;
border: 4px solid #0000ff;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<header>
<h1>Contact Us</h1>
<h4>Send Us Your Queries</h4>
</header>
<form>
<div class="email">
<label for="email">Email-Id</label>
<input type="email" class="textholder" id="email" name="email" placeholder="Do care to enter email">
<h6>We'll never share your email with anyone else.</h6>
<br> </div>
<div class="subject">
<label for="subject">Subject</label>
<input type="text" class="textholder" id="subject" name="subject" placeholder="please care to enter a subject">
<br> </div>
<div class="ftr">
<label for="texta">How would you like our help?</label>
<textarea class="texta" id="content" name="content" rows="8"></textarea>
</div>
<input type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
<p class="imag">
<img src="logo_S0a_2.ico" alt="logo website" width="100px" height="100px">
</p>
<footer>
<div class="contact">
contact us: +91 7782848946 <br> or email us at [email protected]
<br> © 2020 Gentlemens' Idea, Inc. All rights reserved.
</div>
<div class="bgrnd">
The image in the background belongs to its copyrighted owner and not me.
</div>
<div class="spnsr" link="blue">
This site is being hosted at ecowebhosting. site hosting and ip address may change. <br> For any queries,complaints or updates related to website.. email us at <a href="https://www.gmail.com" target="_blank">[email protected]</a>
</div>
</footer>