使用PHP和jQuery表單插件的聯繫表格

我正在使用jQuery表單插件來提交AJAX請求。這是使用此PHP腳本的簡單聯繫人：http://pastie.org/725652 - 唯一的驗證發生在PHP內部。使用PHP和jQuery表單插件的聯繫表格

這裏是我的Javascript代碼觸發整個事情：

$('#contactform').ajaxForm({ 
    target: '#error', 
    beforeSubmit: function() { 
     $('#error').append('<p class="loading">Sending your message...</p>'); 
    }, 
    success: function() { 
     $('#error p.loading').fadeOut(); 
     $('#error').fadeIn('slow'); 
    } 
});

不幸的是，它似乎並沒有工作。 PHP完美地工作，發送電子郵件並返回成功消息，但AJAX魔術由於某種原因不起作用。很顯然我想實現的是通過AJAX顯示PHP腳本通過AJAX返回的消息<div id="error />

我多次使用相同的腳本，從來沒有任何問題，現在我不明白爲什麼它不起作用。這是聯繫表單的標記。

<form id="contactform" class="group" method="post" action="submitemail.php"> 
    <fieldset> 
     <div><label for="first-name">First Name</label> 
     <input type="text" name="first-name" value="Jeremy" /></div> 

     <div class="alt"><label for="last-name">Last Name</label> 
     <input type="text" name="last-name" value="Anderson" /></div> 

     <div><label for="email">E-mail <span>(never published)</span></label> 
     <input type="text" name="email" value="[email protected]" /></div> 

     <div class="alt"><label for="url">Website</label> 
     <input type="text" name="url" value="http://www.mywebsite.com" /></div> 

     <label for="question">Message</label> 
     <textarea name="question" id="" cols="30" rows="10">Thinking of something to say...</textarea> 

     <input type="submit" name="submit" id="submit" value="Send E-mail" /> 
     <div id="error"></div> 
    </fieldset> 
</form>

這裏是jQuery插件的代碼，如果它可以是任何幫助。 http://pastie.org/726175

如果有人可以看看整個事情，並提供一些技巧，爲什麼它不起作用，我會非常感激，提前致謝！

來源

2009-12-03 Justine

我開始認爲這只是一個簡單的錯字，但我通常會複製/粘貼以前項目中的所有腳本。通過這個看了十幾次，仍然無法發現它... – Justine 2009-12-03 20:23:40

必須包含在其中是從PHP的響應參數：

編輯：

嘗試這些變化，在這個例子中，我分開消息「加載」與響應消息。

HTML：

<form id="contactform" class="group" method="post" action="submitemail.php"> 
    <fieldset> 
     <!-- fields --> 

     <input type="submit" name="submit" id="submit" value="Send E-mail" /> 
     <div id="error"><span id="eloading"></span><span id="eresponse"></span></div> 
    </fieldset> 
</form>

的Javascript：

$('#contactform').ajaxForm({ 
    target: '#eresponse', 
    beforeSubmit: function() { 
     $('#eresponse').hide('slow'); 
     $("#eloading").append("<p class=\"loading\">Sending your message...</p>"); 
    }, 
    success: function(responseText, statusText) { 

     alert("test status: " + statusText + "\n\nresponseText: \n" + responseText); 
     $("#eloading").empty(); 
     $('#eresponse').show('slow'); 
    } 
});

來源

2009-12-03 20:15:43

它沒有這樣做：（它仍然會通過成功消息進入submitemail.php文件，而不是在#error中顯示消息。 – Justine 2009-12-03 20:22:39

它沒有做的伎倆:(它仍然轉到submitemail.php文件與成功消息，而不是在#error中顯示消息。 - Justine 39 分鐘前

如果發生這種情況，這意味着連接到提交事件didnt與

return false;

結束這個函數我給ajaxForm beleive這是自動完成的，這樣意味着在你的代碼中的錯誤的地方。如果你沒有安裝螢火蟲，安裝它，並留意在控制檯上確保：

jQuery是加載OK
沒有 errrors建立AJAX 互動或在任何其他JS頁面可能會阻止它

來源

2009-12-03 21:11:12 prodigitalson

使用PHP和jQuery表單插件的聯繫表格

回答

相關問題