首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在与表单相同的模式窗口中加载php成功消息

在与表单相同的模式窗口中加载php成功消息
EN

Stack Overflow用户
提问于 2013-06-14 03:41:20
回答 1查看 4K关注 0票数 3

你好,我正在尝试在表单实际所在的模式窗口中加载我的php表单成功(或错误)消息。我只想在模式中打开表单,而不必因为任何原因切换页面。我一直在搜索S/O却找不到类似的东西。也许我没问对的问题.我不知道。我的代码目前看起来如下:

编辑:这是正确工作的代码。仍然需要样式,但它是功能的。

代码语言:javascript
复制
<?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>
                    &nbsp&nbspFor 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>
                    &nbsp&nbspUnderstanding 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>

代码语言:javascript
复制
<!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>
                    &nbsp&nbspFor 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>
                    &nbsp&nbspUnderstanding 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文件:

代码语言:javascript
复制
<?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
}
?>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-14 04:12:22

将两个文件合并为一个文件,并确保它有一个.php扩展名。

然后将表单操作设置为action="<?php $_SERVER['PHP_SELF']?>"

然后在@mail($email_to, $email_subject, $email_message, $headers);下面

添加header("Location: thank_you.htm");

这对我来说很管用,但它把#openmodal添加到了网站地址。它在一定程度上起作用,您可能需要修改您的模态脚本来修复这个问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17100732

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档