Question

我正在使用我的新网站，我正在使用模板，但使用notepad ++编辑内容。我目前正在编辑联系我页面，我在努力寻找在提交表单后显示成功消息的解决方案，我希望消息在同一页面上。在我将一些信息提交到文本框后，单击提交它只是将我重定向到PHP文件，其中看起来什么都不包含。我已将我正在尝试完成此操作的页面上传到我的网站以进行测试。

我想知道是否有人可以帮助我向我展示回应成功消息的方法，我已经阅读了多篇文章，其中说我需要使用ajax来实现这一目标，但我不确定从哪里开始，或者如何做到这一点

如果有人能帮助我，那就太好了！我将在下面发布我的HTML和PHP脚本。

我还应该注意，当页面重定向到PHP脚本时，会发送一封成功的电子邮件，其中包含在联系表单中输入的信息。除了在屏幕上成功显示消息以显示消息已正确发送之外，它都能正常工作。

编辑：

我指的网页是www.richardmotion.com

HTML

<form name="cForm" id="cForm" action="http://www.richardmotion.com/form-to-email.php" method="post">
                       <fieldset>

                     <div class="form-field">
                              <input name="cName" type="text" id="cName" class="full-width" placeholder="Your Name" value="">
                     </div>

                     <div class="form-field">
                              <input name="cEmail" type="text" id="cEmail" class="full-width" placeholder="Your Email" value="">
                     </div>

                     <div>
                    <label for="sampleRecipientInput">Reason For Contacting</label>
                        <div class="ss-custom-select">
                            <select name="cEnquiry" class="full-width" id="sampleRecipientInput">
                            <option value="General Enquiry">General Enquiry</option>
                            <option value="Question About A Guide">Question About A Guide</option>
                            <option value="Question About A Review">Question About A Review</option>
                            </select>
                        </div>                      
                    </div>

                     <div class="message form-field">
                        <textarea name="cMessage" id="cMessage" class="full-width" placeholder="Your Message" ></textarea>
                     </div>

                     <button type="submit" name="submit" value="Submit" class="submit button-primary full-width-on-mobile">Submit</button>

                       </fieldset>
                  </form>

PHP

<?php
$cName = $_POST['cName'];
$cEmail = $_POST['cEmail'];
$cEnquiry = $_POST['cEnquiry'];
$cMessage = $_POST['cMessage'];
?>

<?php
$email_from = 'enquiries@richardmotion.com';
$email_subject = "Website Enquiry";
$email_body = "Hi my name is: $cName,\nI have a: $cEnquiry.\n\n$cMessage"
?>

<?php
$to = "richard.0.motion@gmail.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $cEmail \r\n";
mail($to,$email_subject,$email_body,$headers);
?>

Answer 1

检查此答案：jQuery AJAX submit form

或直接使用JQuery Form plugin

Answer 2

由于联系页面看起来是纯HTML，然后使用AJAX发送表单数据并使用回调函数在html（或创建一个）中填充一些容器元素并带有消息。

<?php
    /* form-to-email.php */
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['cName'], $_POST['cEmail'], $_POST['cEnquiry'],$_POST['cMessage'] ) ){

        $args=array(
            'cName'     =>  FILTER_SANITIZE_STRING,
            'cEmail'    =>  FILTER_SANITIZE_EMAIL,
            'cEnquiry'  =>  FILTER_SANITIZE_STRING,
            'cMessage'  =>  FILTER_SANITIZE_STRING
        );
        $_POST=filter_input_array( INPUT_POST, $args );
        extract( $_POST );



        $email_from = 'enquiries@richardmotion.com';
        $email_subject = "Website Enquiry";
        $email_body = "Hi my name is: $cName,\nI have a: $cEnquiry.\n\n$cMessage";



        $to = "richard.0.motion@gmail.com";
        $headers = "From: $email_from \r\n";
        $headers .= "Reply-To: $cEmail \r\n";
        $status = mail( $to, $email_subject, $email_body, $headers );

        echo $status ? 'Thankyou - your message was sent' : 'Bogus - there was some sort of error';
    }
?>

<!-- contact page -->
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Contact</title>
        <script>
            function ajax(url,params,callback){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 ){
                        callback.call( this, xhr.response );
                    }
                };
                xhr.open( 'POST', url, true );
                xhr.send( params ); 
            }
            document.addEventListener('DOMContentLoaded',function(){
                document.querySelector('input[type="button"][name="submit"]').onclick=function(event){
                    var fd=new FormData( document.getElementById('cForm') );
                    ajax( '/form-to-email.php', fd, function(r){
                        document.getElementById('target').innerHTML=r;
                    }); 
                }                   
            }, false );

        </script>
    </head>
    <body>

        <p>Lorem ipsum Deserunt est dolore Ut Excepteur nulla occaecat magna occaecat Excepteur nisi esse veniam dolor 
        consectetur minim qui nisi esse deserunt commodo ea enim ullamco non voluptate consectetur minim aliquip Ut 
        incididunt amet ut cupidatat.</p>


        <div id='target'></div>


        <form name="cForm" id="cForm" method="post">
            <fieldset>

                <div class="form-field">
                    <input name="cName" type="text" id="cName" class="full-width" placeholder="Your Name" value="">
                </div>

                <div class="form-field">
                    <input name="cEmail" type="text" id="cEmail" class="full-width" placeholder="Your Email" value="">
                </div>

                <div>
                    <label for="sampleRecipientInput">Reason For Contacting</label>
                    <div class="ss-custom-select">
                        <select name="cEnquiry" class="full-width" id="sampleRecipientInput">
                            <option value="General Enquiry">General Enquiry
                            <option value="Question About A Guide">Question About A Guide
                            <option value="Question About A Review">Question About A Review
                        </select>
                    </div>                      
                </div>

                <div class="message form-field">
                    <textarea name="cMessage" id="cMessage" class="full-width" placeholder="Your Message" ></textarea>
                </div>

                <button name="submit" value="Submit" class="submit button-primary full-width-on-mobile">Submit</button>

            </fieldset>
        </form>
    </body>
</html>

表单提交在新浏览器选项卡中显示空白php脚本

2 个答案: