2013-08-28 89 views
0

我試圖發送一個簡單的表單到使用PHP的電子郵件,但無法獲得實際的ajax函數的工作。使用jQuery和PHP發佈表單值

這是以下形式:

<form id="quick-booking-form" method="post" action="#"> 
        <input type="text" name="mail" id="mail"> 
        <textarea name="message" id="message"> 
        </textarea> 
        <input type="submit" value="Send the Message" id="SendTheForm"> 
       </form> 

這然後被髮送到一個單獨的Javascript函數,其保持AJAX:

$(function() { 
      //alert("page loaded"); 
      $('#quick-booking-form').submit(function(event) { 
       event.preventDefault(); 
       alert("Start of function"); 
       var mail = $("#mail").val(); 
       var message = $("#message").val(); 
       alert("Mail: " + mail + " Message: " + message); 

       $.ajax({ 
        type: "POST", 
        url:"process.php", 
        data:{ 
         "mail": mail, 
         "message": message, 
         }, 
        dataType: "text" 
       }).success(function(result){ 
        alert(result); 
        //next line: end of function 
        }) ; 

       //next line: end of ajax 
      }); 
     //next line: end of script 
     }); 

應的數據發送到該PHP文件(過程。 php):

$msg = $_POST['message']; 
       $UserName = $_POST['mail']; 

       $contact = "Booking Manager"; 
       $reply = "[email protected]"; 

       //Subject is always... 
       $subject = "A message from ".$UserName; 
       $from = $reply; 

       //test data 
       //$contactDetails = "[email protected]"; 


       // send message 
       $message = "Message reads: ".$msg; 
       //$to = "[email protected]"; 
       $to = $_POST['mail']; 
       //$headers = "From: " . $contact."\r\n"."Reply-To:".$reply; 
       $headers = "From: " . $contact; 
       mail($to, $subject, $message, $headers); 
       echo "Mail Sent."; 

應該發生什麼是表單被提交。然後在validate.js中驗證(代碼省略)。如果通過,表單數據將被髮送到process.php。這又將通知消息發送到[email protected]

當前發生的情況是alert("Start of Function")會觸發,並且警報也會顯示正確的值。

這是儘可能的。郵件功能似乎不會觸發,並且最後一次警報也不會顯示。

+4

幫助我們來幫助你。什麼不起作用?你期望會發生什麼,而發生什麼呢?在您的JavaScript控制檯中是否有任何錯誤?瀏覽器工具的網絡選項卡上的XHR請求是否正確? –

+0

您目前是否收到任何警報? – PaulSkinner

+2

這可能是默認提交事件觸發。將'event.preventDefault()'添加到處理程序的開頭。 –

回答

1

你是正確的,但一些變化,試試這個

$(function() { 
//alert("page loaded"); 
$('#quick-booking-form').submit(function(event) { 
    event.preventDefault(); 
    alert("Start of function"); 
    var mail = $("#mail").val(); 
    var message = $("#message").val(); 
    alert("Mail: " + mail + "Message: " + message); 

    $.ajax({ 
     type: "POST", 
     url:"process.php", 
     data:{ 
      "mail": mail, 
      "message": message, 
      }, 
     dataType: "text", 
     success: function(html) { 
      alert(html); 
     } 
    }); 
    return false; 

    //next line: end of ajax 
    }); 
    //next line: end of script 
    }); 

對Ajax使用的preventDefault功能和成功,而不是做

0

試試這個 包括jQuery庫

HTML:

<form id="quick-booking-form" method="post" action="javascript:return false"> 
email: 
<input type="text" name="mail" id="mail"> 
<br/> 
message: <textarea name="message" id="message"> 
</textarea><br/> 
<input type="submit" value="Send the Message" id="SendTheForm"> 
</from> 

腳本:

$(function() { 
    //alert("page loaded"); 
    $('#quick-booking-form').submit(function(event) { 

     var mail = $("#mail").val(); 
     var message = $("#message").val(); 
     if(mail==""){ 
      alert("enter Mail"); return false; 
     } 
     if(message==""){ 
      alert("enter message"); return false; 
     } 
     $.ajax({ 
      type: "POST", 
      url:"process.php", 
      data:{ 
       "mail": mail, 
       "message": message, 
       },success:function(result){ 
        alert(result); 
       } 

     }); 

    //next line: end of ajax 
    }); 
//next line: end of script 
}); 

process.php:

$to =$_POST['mail']; 
$subject = "Test mail"; 
$message =$_POST['mesage']; 
$from = "[email protected]"; 
$headers = "From:" . $from; 
mail($to,$subject,$message,$headers); 
echo "Mail Sent.";