0
我试图创建一个电子邮件表单，当您单击某个按钮时，它会从页面底部向上滑动，如果再次单击它，它将简单地向下滑动，但我遇到问题，点击发送，它不验证像它应该也重新加载页面不止一次，继承人的网页：http://harryfelton.host56.comPHP电子邮件表单动画
我相信我已经在PHP乱七八糟的东西了，这里是整个索引文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/primary.css"> <!--Address Using URL to prevent no styling when slash is typed-->
<link rel="shortcut icon" href="Images/tabIcon.ico">
<title>Harry Felton | Welcome</title>
</head>
<script>
function toggleAbout(){
if ($("#center").hasClass("up")) {
$("#about").slideToggle(500);
setTimeout(function() {
$("#center").css({
transform: 'translateY(10px)',
})
}, 500);
} else {
$("#center").css({
transform: 'translateY(-75px)',
})
setTimeout(function() {
$("#about").slideToggle(500);
}, 1000);
}
$($("#center").toggleClass("up"))
};
function toggleContact(){
$("#contactForm").toggleClass("hardHide");
$("#contactForm").toggleClass("hidden");
}
</script>
<body style="display:none;" class="pg-index">
<div class="overwrap">
<div id="centerNoY">
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a onclick="loadPage('portfolio', 'body');"><span>Portfolio</span><img src="Images/arrow.png"></a>
<ul>
<li class='has-sub'><a onclick="loadPage('programs', 'body');"><span>Programs</span></a>
<ul>
<li><a onclick="loadPage('SecuritySP', 'body');" ><span>HbombOS Security Suite</span></a></li>
<!--<li class='last'><a href='#'><span>Sub Product</span></a></li>-->
</ul>
</li>
<li class='has-sub'><a onclick="loadPage('projects', 'body');"><span>Projects</span></a>
<ul>
<li><a onclick="loadPage('HbombOS', 'body');"><span>HbombOS</span></a></li>
<li class='last'><a onclick="loadPage('IA', 'body');"><span>Industrial Advance</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a onclick="toggleAbout();"><span>About</span></a></li>
<li class='last'><a onclick="toggleContact();"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="center">
<h1 id="title1">Welcome</h1>
<h2 id="title2">Harry Felton</h2>
<h2 id="subTitle">Auckland | New Zealand</h2>
<br><br><br><br>
<div id="about" style="display: none;">
<p>Hi, My name is Harry and I am an amateur programmer, I just do it as a hobby until I can actually take it as a course, I have created many programs, and love doing it, I am also into ComputerCraft which is a mod for Minecraft that adds programmable computers.<br><br>This website domain was initially created around September 2014, It took about a week to create, It was awesome, As it was the first time I had ever used HTML, CSS or JavaScript. On the 20th November I chose to completely recreate the website, So I deleted all files, And now... Here we are.<br><br>My absolute favorite thing to do in this world is code, I enjoy making, distributing and using my programs, And the feedback is always awesome, If you feel like leaving feedback, then click HERE</p>
</div>
</div>
<div id="contactForm" class="hidden hardHide">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<title>Contact Us</title>
<div id="mainPageCont">
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
// This is where you process the email and display the thank you page
$to = '[email protected]';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$message .= 'Message Type: ';
$message .= ($_POST['Type'] !== 'Other')? $_POST['Type']."\n": strip_tags($_POST['option'])."\n";
$headers = 'From: [email protected]' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
// If the mail is successful, display thanks else display failed
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
<?php
$replyTo = strip_tags($_POST['Email']);
$replySubject = 'Thank You For Leaving A Comment ';
$replySubject .= strip_tags($_POST['Name']);
$replyMess = 'Thanks for leaving a message on www.harryfelton.host56.com' . "\n\n";
$replyMess .= 'If you didnt use the email of: '.strip_tags($_POST['Email']) . ' then please contact us by replying to this email' ."\n\n";
$replyMess .= 'Although if you did then you can expect a reply to your comment in two working days if the comment requires a reply' ."\n";
$replyHeaders = 'From: [email protected]' . "\r\n" .
'Reply-To: ' . '[email protected]' . "\r\n";
mail($replyTo, $replySubject, $replyMess, $replyHeaders);
?>
<div id="comments_form">
<!--Message Sent! Slide Email Up! -->
<?php else: ?>
<div id="comments_form">
<!--There was an error, let then know that it couldnt be sent-->
<script>alert("Your message can not be sent at this time, Please try again later and ensure your internet connection is active");</script>
<?php endif ?>
</div>
<?php else: ?>
<form method="post" id="comments_form">
<h2>Please Leave Some Feedback, It Helps!</h2>
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
<?php if(in_array('Name', $validation)): ?>
<span class="error"><?php echo $error_messages['Name']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
e.g. John Smith or Jane Doe
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
<?php if(in_array('Email', $validation)): ?>
<span class="error"><?php echo $error_messages['Email']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
We wont spam you! We only need this to reply to questions you might pose
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Type Of Message
</div>
<!--.label end-->
<div class="input">
<input type="radio" name="Type" onChange="GetValue(this)" value="Feedback" checked="checked" />
Feedback <br />
<input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
Feature Request<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
Bug Report<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
Other<br />
<input type="text" style="display:none;" id="option" name="option" <?php echo (isset($_POST['option']))? $_POST['option']: ''; ?> />
<?php if(in_array('Type', $validation)): ?>
<span class="error"> <?php echo $error_messages['Type']; ?> </span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
This is to help us better respond to your message
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
<?php if(in_array('Comment', $validation)): ?>
<span class="error"><?php echo $error_messages['Comment']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
// This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
var Writing = $(ThisVal).val();
// This just shows you what is happening via the feedback div
$('#feederback').html(Writing);
if (Writing == 'Other') {
// If other, disable the submit
$("#submit").prop("disabled", true);
// Fade in the message textarea
$('#option').fadeIn('fast');
// Check the message area to see if there is text in it already.
// If there is text enable the submit button
CheckVal();
} else {
// If not other, fade out the message
$('#option').fadeOut('fast');
// Enable the submit button
$('#submit').prop("disabled", false);
}
}
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function() {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function() {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Type: { required: true },
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Type: { required: 'Please Select A Type' },
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/element.js"></script>
<script type="text/javascript" src="JavaScript/pageNav.js"></script>
<script>
$(document).ready(function() {
fadeIn("body");
});
</script>
<script>changeWelcome("#title1");</script>
</body>
</html>
继承人影响此问题的CSS文件：
p {
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.pg-index #center {
transition: 1s transform;
position: absolute;
top: 25%;
width: 100%;
}
a.url{
text-decoration: underline;
color: #0FF;
cursor:pointer;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 20px;
}
a.url:hover {
color: #FFFFFF;
}
body, html{
background-color: #09F; /*Light Blue Color */
font-color: #FFF;
color: #FFF;
padding: 0;
margin: 0;
font-family: 'Nunito', sans-serif;
}
/*Dynamic Page Elements*/
#contactForm.hidden{
top: 100%;
margin-top: 20px;
opacity: 0;
}
#contactForm.hardHide{
display: none;
}
#contactForm {
position:absolute;
margin: 0 auto;
text-align: center;
border: medium solid #930;
z-index: 100;
}
#center {
text-align: center;
}
编辑：我调整了代码，它可以防止重载，虽然形式依然是允许任何数据进行验证，它应该告诉我，我需要进入它...
如果你们有任何建议或更好的，修复，然后请让我知道，谢谢。
Ahhh，是的，谢谢，我注意到我发布这个问题后不久，谢谢:) – Harry 2014-11-22 22:37:14