Hello I'm trying to get my php form success (or error) message to load within the modal window that the form is actually in. I would like to just have the form open in the modal, without having to switch pages for any reason. I've been search S/O and couldn't find anything similar. Maybe I'm not asking the right question...I don't know. My code currently looks like:
EDIT: This is the code that works properly. Needs to be styled still but it's functional.
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "webadmin@collegeboundparentnetwork.com";
$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>
HERE is my PHP file:
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "mail@example.com";
$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
}
?>
Merge both files into one and make sure it has a PHP extension .php.
Then set your form action to action="<?php $_SERVER['PHP_SELF']?>"
and then underneath @mail($email_to, $email_subject, $email_message, $headers);
add header("Location: thank_you.htm");
That worked for me, but it added #openmodal to the web address. It works to a certain extent, and you may have to modify your modal script to fix that.
来源：https://stackoverflow.com/questions/17100732/loading-a-php-success-message-within-a-modal-window-same-as-the-form