2015-06-22 59 views
3

我遇到了php聯繫表的問題。這是發送空電子郵件,修復後,現在它不會發送電子郵件,但將我重定向到一個空白頁說「發送」(這是在send-email.php文件編碼..Ajax 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: [email protected]"; 
    $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 = '[email protected]'; //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 
    } 


?> 

回答

3

你應該返回false到jQuery提交函數不提交表單。它不是重定向,而是提交給send_email.php。 jQuery代碼添加後返回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: [email protected]"; 
    $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 = '[email protected]'; //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 
     } 
    } 


?> 
+0

感謝您的答覆。但依然如此。 – vincodisouza

+0

添加了行,仍然一樣..它用於顯示錯誤消息,現在即使表單完全爲空,它也會重定向到「發送」頁面。 – vincodisouza

1

的東西,如果你的JavaScript不觸發,這可能是由於該形式是例如使用表單域,而不是按鈕,單擊回車鍵後提交。

相反的事件處理程序連接到按鈕(在那個錯了,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; 

+0

感謝您的答案。你剛纔說了什麼,沒有任何改變。 – vincodisouza