ajax表單轉到另一個頁面，而不是保留在同一頁面

Question

我有這個彈出ajax窗體，而不是發送數據並保持在同一頁面上，它發送數據，但帶我到我的文件send.php形成。這是爲什麼？我在另一個網站上正確實施了幾乎相同的表單。我不知道我做錯了什麼......

形式：

<form id="form" action="send.php" name="form" method="post" > 

    <input type="text" id="name" name="name" value="" /><br /> 

    <input type="text" id="email" name="email" value="" /><br /> 

    <textarea name="message" cols="4" rows="4" id="message" ></textarea><br /> 

    <input type="submit" value="" id="submit" title="Send!"/> 

</form> 

AJAX：

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#form').ajaxForm({ 
     beforeSubmit: validate 
    }); 

    function validate(formData, jqForm, options) { 
     var name = $('input[name=name]').fieldValue(); 
     var email = $('input[name=email]').fieldValue(); 
     var message = $('textarea[name=message]').fieldValue(); 

     if (!name[0]) { 
      alert('Please enter a value for name'); 
      return false; 
     } 
     if (!email[0]) { 
      alert('Please enter a value for email'); 
      return false; 
     } 
     if (!message[0]) { 
      alert('Please enter a value for message'); 
      return false; 
     } 

     else { 

     $("#prima_form").fadeOut(1000, function() { 
      $(this).html("<img src='images/de_multumire.png'/>").fadeIn(2000); 
     }); 

     var message = $('textarea[name=message]').val(''); 
     var name = $('input[name=name]').val(''); 
     var email = $('input[name=email]').val(''); 

} 
} 

}); 

</script> 

send.php：

<?php 
     if($_POST){ 
       $email = $_POST['email']; 
       $name = $_POST ['name']; 
       $message = $_POST ['message']; 
       // response hash 
       $ajaxresponse = array('type'=>'', 'message'=>''); 

       try { 
         // do some sort of data validations, very simple example below 
         $all_fields = array('name', 'email', 'message'); 

         foreach($all_fields as $field){ 
           if(empty($_POST[$field])){ 
             throw new Exception('Required field "'.ucfirst($field).'" missing input.'); 
           } 
         } 

         // ok, if field validations are ok 
         // now Send Email, ect. 

         // let's assume everything is ok, setup successful response 
         $subject = "New Contact"; 
         //get todays date 
         $todayis = date("l, F j, Y, g:i a") ; 

         $message = " $todayis \n 
         Attention: \n\n 
         Please see the message below: \n\n 
         Email Address: $email \n\n 
         Message: $message \n\n 

         "; 

         $from = "From: $email\r\n"; 


         //put your email address here 
         mail("contact@xxx.ro", $subject, $message, $from); 

         //prep json response 
         $ajaxresponse['type'] = 'success'; 
         $ajaxresponse['message'] = 'Thank You! Will be in touch soon'; 
       } catch(Exception $e){ 
         $ajaxresponse['type'] = 'error'; 
         $ajaxresponse['message'] = $e->getMessage(); 
       } 
       // now we are ready to turn this hash into JSON 
       print json_encode($ajaxresponse); 
       exit; 
     } 
?> 

我的js控制檯給出這個：

[17:38:03.840] [cycle] terminating; zero elements found by selector @ http://sociallab.ro/js/jquery_003.js:10 
-- 
[17:38:16.012] POST http://sociallab.ro/send.php [HTTP/1.1 200 OK 218ms] 

[17:38:16.204] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://sociallab.ro/send.php 

謝謝！

Answer 1

在純JavaScript你需要做的是這樣的：

function sendWithAjax() { 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST", "send.php", true); 

然後從輸入單元讀取的值：

var email = document.getElementById('email').value; 
    var name = document.getElementById('name').value; 
    var message = document.getElementById('message').value; 

您可以調用之前。發送這裏驗證表單（）

（您可能需要使用escape（）函數來跳過表單元素的內容）

並把它們放入發送方法：

ajax.send("email="+ email +"&name="+ name +"&message="+ message); 

而且還從你的表單代碼取出完整的表單標籤。因此，你不會需要一個提交按鈕，所以將其更改爲一個簡單的按鈕：

<input type="text" id="name" name="name" value="" /><br /> 
<input type="text" id="email" name="email" value="" /><br /> 
<textarea name="message" cols="4" rows="4" id="message" ></textarea><br /> 
<input type="submit" value="" id="submit" title="Send!" onclick="javascript:sendWithAjax()"/> 

要獲得Ajax響應使用：

var response = ajax.responseText; 
} 

Answer 2

嘗試添加此：

$('#submit').click(function(){ return false; /* stop html form from submitting*/ }) 

我相信發生了什麼是jquery通過ajax發送表單數據，但是您不會停止默認的「submit」按鈕來提交html表單，就像正常一樣。添加上面的代碼應該停止提交按鈕的默認操作（將表單提交給send.php），從而將您留在當前頁面上。

Answer 3

喜歡的東西：

$(document).ready(function(event){ 
     event.preventDefault(); 
     $('#FORMID').ajaxForm({ 
      type: 'POST', 
      dataType: 'json', 
      beforeSubmit: function(){ 
      }, 
      success: function(resp){ 

      }, 
      error: function(resp){ 

      } 
     }); 
    }); 

希望這會有所幫助。