我正在尝试使用电子邮件联系表单，默认情况下，在提交邮件后重定向到另一个页面。但是，我希望在邮件提交后停留在同一页面上，但会弹出一条消息，告诉发件人邮件已发送但没有离开页面。下面是我的 HTML 页面中的 javascript 和我正在尝试使用的 PHP。
谁能解释一下我遗漏了什么以及如何做到这一点？
<script type="text/javascript">
$(document).ready(function() {
$("#contactFormSubmit").click(function( event ) {
$.post( “/contactengine.php", $("#contactForm").serialize() );
$('#contactFormConfirmation').slideDown();
$('#submitFormReset').click();
});
});
</script>
<?php
$EmailFrom = "";
$EmailTo = "";
$Subject = "";
$Name = Trim(stripslashes($_POST['Name']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// redirect to success page
if ($success){
print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
}
else{
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>
最佳答案
好吧，我认为你应该试试这个!
首先像发送电子邮件一样运行 php 脚本，然后在 php 脚本的底部包含这一行
header("Location: http://myurl.com/contact?check=1");
然后在联系人页面上有一个隐藏的输入，其中包含值 0，称为检查，然后使用 url 参数填充输入框。
在页面加载时检查隐藏输入框的值，看它是 1 还是 0。如果它的 1 显示弹出框，如果它的 0 正常加载页面
希望对您有所帮助!
使用此代码
<form id="contactForm" method="post" action="contactengine.php">
<div class="row half">
<div class="6u">
<input type="text" class="text" placeholder="Name" name="Name" />
</div>
<div class="6u">
<input type="text" class="text" placeholder="Email" name="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" name="Message"></textarea>
</div>
</div>
<div class="row" id="contactFormConfirmation" style="display: none;">
<div class="12u">
<p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
</li>
<li>
<input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
</li>
</ul>
</div>
</div>
</form>
<form name="checkf" id="checkf">
<input name="check" id="check" value="0">
</form>
编辑:
把刚刚加的代码改成下面那个忘记加一行了哈哈
<script type="text/css">
function fcheckf(){
var x = document.getElementById('check').value;
if(x == 0)
{
return false;
}
else
{
alert("Thank you for submitting your data! - This is the pop up box content!");
}
}
</script>
添加以上内容后，更改您的:
<body>
标签，为此:
<body onload="fcheckf()">
另一个编辑
现在在
之前添加</body>
标签。将它粘贴在正文标签之前的行中很重要:)
<script type="text/javascript">
var data=location.search;
if(data) {
data=location.search.substring(1);
data=data.split('&');
var pairs={};
for(var i=0; i<data.length; i++){
var tmp=data[i].split('=');
pairs[tmp[0]]=tmp[1];
}
var f = document.checkf;
for (var i in pairs) {
if(f.elements[i]) {f.elements[i].value = pairs[i];}
}
}
编辑 56981 V3
在您的 html 中使用此代码
<script>
function fcheckf(){
var x = document.getElementById('check').value;
if(x == 0)
{
return false;
}
else
{
alert("Thank you for submitting your data! - This is the pop up box content!");
}
}
</script>
<section id="fourth" class="contact">
<header>
<div class="container">
<span class="image-header-contact"><img src="images/contact-header.png" alt="Video" /></span>
<h2>Get In Touch</h2>
</div>
</header>
<div class="content style4 featured">
<div class="container small">
<form id="contactForm" method="post" action="contactengine.php">
<div class="row half">
<div class="6u">
<input type="text" class="text" placeholder="Name" name="Name" />
</div>
<div class="6u">
<input type="text" class="text" placeholder="Email" name="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message" name="Message"></textarea>
</div>
</div>
<div class="row" id="contactFormConfirmation" style="display: none;">
<div class="12u">
<p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
</li>
<li>
<input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
</li>
</ul>
</div>
</div>
</form>
<form name="checkf" id="checkf">
<input name="check" id="check" value="1">
</form>
</div>
</div>
</section>
<script>
var data=location.search;
if(data) {
data=location.search.substring(1);
data=data.split('&');
var pairs={};
for(var i=0; i<data.length; i++){
var tmp=data[i].split('=');
pairs[tmp[0]]=tmp[1];
}
var f = document.checkf;
for (var i in pairs) {
if(f.elements[i]) {f.elements[i].value = pairs[i];}
}
}
</script>
关于javascript - PHP/JavaScript 电子邮件联系表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23270146/