您好，我正在尝试让我的 php 表单成功（或错误）消息加载到表单实际所在的模态窗口中。我想只在模态中打开表单，而不必以任何原因切换页面。我一直在搜索 S/O，但找不到类似的东西。也许我没有问正确的问题......我不知道。我的代码目前如下所示：
编辑：这是可以正常工作的代码。仍然需要造型，但它很实用。
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "[email protected] /cdn-cgi/l/email-protection";
$email_subject = "Form Submission";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
<style>
</style>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p id="p1">Message</p>
<p style="font-size: 16px;">Thank you for contacting us. We will be in touch with you very soon.</p>
<p style="font-size: 16px;">Click <a href="index.html" style="text-decoration: none; color: green;">Here</a> to return home.</p>
</div>
</div>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>College Bound Parent Network</title>
<link rel="stylesheet" href="css/main_styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
form{margin-left: 80px; margin-right: 80px; text-align: left;}
#p1 {text-align: left; margin-left: 80px;}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
</head>
<body class="no-js">
<div id="center_div">
<nav id="topNav">
<ul>
<li><a href="student-athlete.html" title="Athletes">Athletes</a></li>
<li><a href="student-music.html" title="Music">Music</a></li>
<li><a href="testing.html" title="Testing">Testing</a></li>
<!--<li><a href="administration.html" title="Aministration">Administration</a></li>-->
<li><a href="advising.html" title="Advising">Advising</a></li>
<li><a href="links.html" title="Useful Links">Links</a></li>
<li><a href="contact.html" title="Contact CBPN">Contact</a></li>
</ul>
</nav>
<div id="header"><a href="index.html">College Bound Parents Network</a></div>
<hr id="hr"/>
<div id="inner_article">
</br>
<p id="p1">Welcome to CBPN College Recruiting</p>
<p>
  For the last 20 years our team has been involved working with college bound students
and their families. Over the years not only cost of college has increased but also the
number of students applying for college has increased from 1.2 million to over 3 million a year in 2012.
Students who have an above averge GPA no longer can be assured of a seat at the college. Also affordability
is a key issue in determining which school that student attends.
</p>
<p>
  Understanding the increase in the number of students who are now applying to college, we have put together
a web site that assists college bound students and their families in the following ways:
<ul style="text-align: left; margin: 5px 15px 5px 15px;">
<li>1. Create an athletic recruitment tool where student athletes can actively promote themselves to college coaches;</li><br/>
<li>2. Help with recruitment for of musically talented students who want to continue to play in college.</li><br/>
<li>3. Offer an online test prep service to prepare students with both SAT/ACT. Too often students forget that they will not receive all their college money for their sports or music talent. We know test scores play a key role with merit aid.</li><br/>
<li>4. Offer an SAT/ACT diagnostic tool, so students can spend their time preparing for the right test: offer AP prep courses. Due to the importance of the SAT/ACT for acceptance and merit aid, we believe students should focus on the test that best suits their skills so using the diagnostic tool will help determine which test is best for each student.</li><br/>
</ul>
</p>
<p>
We hope you enjoy the tools offered and ask that you contact us at any time if you have any questions or concerns.
</p>
<p id="demo">
<a href="#openModal"><img src="/images/contact_us.jpg" align="center" title="Click to contact us!"/></a><br/>
<figcaption>Contact Us!</figcaption>
<br/><br/>
</p>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p id="p1">Contact Us</p>
<form id="frm1" name="contactform" method="post" action="<?php $_SERVER['PHP_SELF']?>">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments*</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="60" rows="6" wrap="hard">Please provide grade level and type of assistance you are looking for.</textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>College Bound Parent Network</title>
<link rel="stylesheet" href="css/main_styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
form{margin-left: 80px; margin-right: 80px; text-align: left;}
#p1 {text-align: left; margin-left: 80px;}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
</head>
<body class="no-js">
<div id="center_div">
<nav id="topNav">
<ul>
<li><a href="student-athlete.html" title="Athletes">Athletes</a></li>
<li><a href="student-music.html" title="Music">Music</a></li>
<li><a href="testing.html" title="Testing">Testing</a></li>
<!--<li><a href="administration.html" title="Aministration">Administration</a></li>-->
<li><a href="advising.html" title="Advising">Advising</a></li>
<li><a href="links.html" title="Useful Links">Links</a></li>
<li><a href="contact.html" title="Contact CBPN">Contact</a></li>
</ul>
</nav>
<div id="header"><a href="index.html">College Bound Parents Network</a></div>
<hr id="hr"/>
<div id="inner_article">
</br>
<p id="p1">Welcome to CBPN College Recruiting</p>
<p>
  For the last 20 years our team has been involved working with college bound students
and their families. Over the years not only cost of college has increased but also the
number of students applying for college has increased from 1.2 million to over 3 million a year in 2012.
Students who have an above averge GPA no longer can be assured of a seat at the college. Also affordability
is a key issue in determining which school that student attends.
</p>
<p>
  Understanding the increase in the number of students who are now applying to college, we have put together
a web site that assists college bound students and their families in the following ways:
<ul style="text-align: left; margin: 5px 15px 5px 15px;">
<li>1. Create an athletic recruitment tool where student athletes can actively promote themselves to college coaches;</li><br/>
<li>2. Help with recruitment for of musically talented students who want to continue to play in college.</li><br/>
<li>3. Offer an online test prep service to prepare students with both SAT/ACT. Too often students forget that they will not receive all their college money for their sports or music talent. We know test scores play a key role with merit aid.</li><br/>
<li>4. Offer an SAT/ACT diagnostic tool, so students can spend their time preparing for the right test: offer AP prep courses. Due to the importance of the SAT/ACT for acceptance and merit aid, we believe students should focus on the test that best suits their skills so using the diagnostic tool will help determine which test is best for each student.</li><br/>
</ul>
</p>
<p>
We hope you enjoy the tools offered and ask that you contact us at any time if you have any questions or concerns.
</p>
<p id="demo">
<a href="#openModal"><img src="/images/contact_us.jpg" align="center" title="Click to contact us!"/></a><br/>
<figcaption>Contact Us!</figcaption>
<br/><br/>
</p>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p id="p1">Contact Us</p>
<form id="frm1" name="contactform" method="post" action="send_form_email.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments*</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="60" rows="6" wrap="hard">Please provide grade level and type of assistance you are looking for.</textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
</body>
</html>
这是我的 PHP 文件：
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "[email protected] /cdn-cgi/l/email-protection";
$email_subject = "Form Submission";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
<!--I WANT THIS TO STAY WITHIN THE MODAL PAGE-->
<p style="font-size: 16px; text-align: center;">Thank you for contacting us. We will be in touch with you very soon.</p>
<p style="font-size: 16px; text-align: center;">Click <a href="index.html" style="text-decoration: none; color: green;">Here</a> to return home.</p>
<?php
}
?>
