【问题标题】:Ajax PHP contact form not workingAjax PHP 联系表单不起作用
【发布时间】:2015-06-22 11:44:27
【问题描述】:

我在使用 php 联系表时遇到问题。它正在发送空电子邮件,修复后,现在它不发送电子邮件,而是将我重定向到一个空白页面,上面写着“已发送”(在 send-email.php 文件中编码..

应该使用 AJAX 在不离开活动页面的情况下显示成功消息。不知道怎么了。任何帮助表示赞赏。问候, 这是头部;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
.error { display:none; }
.success { display:none; }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#send_message').submit(function(e){
            e.preventDefault();
            var error = false;
            var name = $('#name').val();
            var email = $('#email').val();
            var message = $('#message').val();
            if(name.length == 0){
                var error = true;
                $('#name_error').fadeIn(500);
            } else {
                $('#name_error').fadeOut(500);
            }
            if(email.length == 0 || email.indexOf('@') == '-1'){
                var error = true;
                $('#email_error').fadeIn(500);
            } else {
                $('#email_error').fadeOut(500);
            }
            if(message.length == 0){
                var error = true;
                $('#message_error').fadeIn(500);
            } else {
                $('#message_error').fadeOut(500);
            } if(error == false){
                $('#cf_submit_p').attr({'disabled' : 'true', 'value' : 'Gönderiliyor...' });
                $.post("send_email.php", $("#contact_form").serialize(),function(result){
                    if(result == 'sent'){
                        $('#cf_submit_p').remove();
                        $('#mail_success').fadeIn(500);
                    } else {
                        $('#mail_fail').fadeIn(500);
                        $('#cf_submit_p').removeAttr('disabled').attr('value', 'Gönder');
                    }
                });
            }
        });
    });
</script>

这是正文部分;

<div class="container-fluid">
                        <p id="returnmessage"></p>
                        <form action="send_email.php" id="contact_form" method="post">
                            <h2 style="font-size:14px;line-height:18px;font-weight:600;padding-bottom:0;">Bize Yazın</h2>
                            <ul class="contactform">
                                <li>
                                    <div id="name_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Lütfen adınızı giriniz.</div>
                                    <span class="contact-input-icon" style="text-align:left"><i class="fa fa-user"></i></span>
                                    <div class="input-field">
                                        <input type="text" style="border:1px solid rgba(220,220,220,0.5)" name="name" id="name" value="" class="required requiredField" placeholder="Ad Soyad"/>
                                    </div>
                                </li>
                                <li>
                                    <div id="email_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Lütfen eposta adresinizi giriniz.</div>
                                    <span class="contact-input-icon"><i class="fa fa-envelope"></i></span>
                                    <div class="input-field">
                                        <input type="email" style="border:1px solid rgba(220,220,220,0.5)" name="email" id="email" value="" class="required requiredField email" placeholder="Eposta"/>
                                    </div>
                                </li>
                                <li class="textarea">
                                    <div id="message_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Lütfen mesajınızı giriniz.</div>
                                    <span class="contact-input-icon"><i class="fa fa-pencil"></i></span>
                                    <div class="input-field">
                                        <textarea name="message" style="border:1px solid rgba(220,220,220,0.5)" id="message" rows="6" cols="20" class="required requiredField" placeholder="Mesajınız"></textarea>
                                    </div>
                                    <div id="mail_success" class="success" style="color:#00CC00"><i class="fa fa-check"></i> İlginiz için teşekkürler. En kısa sürede sizinle irtibata geçeceğiz.</div>
                                    <div id="mail_fail" class="error" style="color:#aa3939"><i class="fa fa-times"></i> Üzgünüz, mesajınız iletilemedi. Daha sonra lütfen tekrar deneyin.</div>
                                </li>
                                <li class="buttons">
                                    <div id="cf_submit_p">
                                    <input type="hidden" style="border:1px solid rgba(220,220,220,0.5)" name="submitted" id="submitted" value="true" />
                                    <button type="submit" style="border:1px solid #3f97cf" class="button" id="send_message"><i class="fa fa-paper-plane-o" style="font-size:20px;color:#3f97cf"></i></button>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div> <!--end container-fluid-->

这里是 send_email.php;

<?php

    $autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
    $autoResponseSubject = "İletişim Formu"; 
    $autoResponseMessage = "<html>
    <head>
        <title>This is your HTML email!</title>
    </head>
    <body> 
        <div style='width:700px; font-family:Arial, Helvetica, sans-serif; font-size:44px; color:#CCC; text-align:center; margin:0 auto; padding:20px;'>THIS IS YOUR</div>/>
    </body>
    </html>";
    $autoResponseHeaders = "Kimden: yeterkara90@gmail.com";
    $autoResponseHeaders .= "MIME-Version: 1.0"."\r\n";
    $autoResponseHeaders .= "Content-type: text/html; charset=iso-8859-1"."\r\n";  

    //we need to get our variables first
    $to =   'yeterkara90@gmail.com'; //the address to which the email will be sent
    $name     =   $_POST['name'];
    $email    =   $_POST['email'];
    $subject  =   "Site İletişim Formu";
    $msg  =   $_POST['message'];

    $message = "Kimden: $name "."\r\n"."Eposta: $to "."\r\n";

    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know
     who are we replying to. */
    $headers  = "From: $email\r\n";
    $headers .= "Reply-To: $email\r\n";


    if(mail($to, $subject, $message, $headers)){
        if($autoResponse === true){
            mail($email, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders);
        }
        echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..
    }else{
        echo 'failed';// ... or this one to tell it that it wasn't sent
    }


?>

【问题讨论】:

    标签: php ajax forms email contact


    【解决方案1】:

    您应该在 jQuery 中为您的提交函数返回 false 以使表单不提交。它不是重定向,而是提交到 send_email.php。 jquery代码加return false后。

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
    .error { display:none; }
    .success { display:none; }
    </style>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $('#send_message').submit(function(e){
                e.preventDefault();
                var error = false;
                var name = $('#name').val();
                var email = $('#email').val();
                var message = $('#message').val();
                if(name.length == 0){
                    var error = true;
                    $('#name_error').fadeIn(500);
                } else {
                    $('#name_error').fadeOut(500);
                }
                if(email.length == 0 || email.indexOf('@') == '-1'){
                    var error = true;
                    $('#email_error').fadeIn(500);
                } else {
                    $('#email_error').fadeOut(500);
                }
                if(message.length == 0){
                    var error = true;
                    $('#message_error').fadeIn(500);
                } else {
                    $('#message_error').fadeOut(500);
                } if(error == false){
                    $('#cf_submit_p').attr({'disabled' : 'true', 'value' : 'Gönderiliyor...' });
                    $.post("send_email.php", $("#contact_form").serialize(),function(result){
                        if(result == 'sent'){
                            $('#cf_submit_p').remove();
                            $('#mail_success').fadeIn(500);
                        } else {
                            $('#mail_fail').fadeIn(500);
                            $('#cf_submit_p').removeAttr('disabled').attr('value', 'Gönder');
                        }
                    });
                }
                return false;
            });
        });
    </script>
    

    在您的 PHP 代码中,您应该在向您发送电子邮件之前检查数据是否已发布。像这样的

    <?php
    
        $autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
        $autoResponseSubject = "İletişim Formu"; 
        $autoResponseMessage = "<html>
        <head>
            <title>This is your HTML email!</title>
        </head>
        <body> 
            <div style='width:700px; font-family:Arial, Helvetica, sans-serif; font-size:44px; color:#CCC; text-align:center; margin:0 auto; padding:20px;'>THIS IS YOUR</div>/>
        </body>
        </html>";
        $autoResponseHeaders = "Kimden: yeterkara90@gmail.com";
        $autoResponseHeaders .= "MIME-Version: 1.0"."\r\n";
        $autoResponseHeaders .= "Content-type: text/html; charset=iso-8859-1"."\r\n";  
    
        //we need to get our variables first
        $to =   'yeterkara90@gmail.com'; //the address to which the email will be sent
        $name     =   $_POST['name'];
        $email    =   $_POST['email'];
        $subject  =   "Site İletişim Formu";
        $msg  =   $_POST['message'];
    
        $message = "Kimden: $name "."\r\n"."Eposta: $to "."\r\n";
    
        /*the $header variable is for the additional headers in the mail function,
         we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
         That way when we want to reply the email gmail(or yahoo or hotmail...) will know
         who are we replying to. */
        $headers  = "From: $email\r\n";
        $headers .= "Reply-To: $email\r\n";
    
        if( $_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['email']) ){
            if(mail($to, $subject, $message, $headers)){
                if($autoResponse === true){
                    mail($email, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders);
                }
                echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..
            }else{
                echo 'failed';// ... or this one to tell it that it wasn't sent
            }
        }
    
    
    ?>
    

    【讨论】:

    • 感谢您的回复。但还是一样。
    • 添加了行,但还是一样..它曾经显示错误消息,现在即使表单完全为空,它也会重定向到“已发送”页面。
    【解决方案2】:

    如果您的 javascript 没有触发,那可能是因为表单是使用表单字段中的 enter 键而不是按钮单击提交的。

    您应该将事件处理程序附加到表单,而不是将事件处理程序附加到按钮(以及错误的,submit 而不是 click...):

    $('#contact_form').on('submit', function(e){
       e.preventDefault();
       ...
    

    另请注意,javascript 将不会继续,因此您应确保没有错误。例如,您只使用var 声明一个变量,之后,您在没有var 的情况下分配值。

    所以:

            if(name.length == 0){
                var error = true;
    

    应该是:

            if(name.length == 0){
                error = true;
    

    等等

    【讨论】:

    • 感谢您的回答。照你说的做了,没有任何改变。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-27
    • 2014-03-31
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多