表單中的Textarea不通過POST使用jQuery AJAX提交

Question

由於我不知道的原因，我的表單沒有提交輸入我的<textarea> 。

ajax代碼：

$.ajax({
type:'POST', 
url:'****.php', 
data:$('#blogForm').serialize(),
success: function(responseSubmit) { blah blah etc...

輸入工作正常，並正確發布到我的數據庫。

表格是：

<form id="blogForm">
                        <input type="date" name="date" id="blogDate">
                        <input type="text" name="title" id="blogTitle">
                        <textarea name="blogContent" id="blogBody"></textarea>
                        <input type="submit" name="submit" id="blogSubmit">
                    </form>

當我在firebug中檢查時，我得到的是： date=09%2F25%2F1986&title=Title&blogContent=

如您所見，blogContent為空。 為什么是這樣？

Answer 1

我忽略了提到我在文本區域附加了一個WYSIWYG編輯器，稱為nicEditor。 顯然有一個錯誤迫使jQuery不能序列化textarea。 一旦nicEditor被刪除，它工作正常。 謝謝你的幫助。

Answer 2

更改：

   data:$('#blogForm').serialize(),

至：

   data:$('#blogForm').find('input, select, textarea, button').serialize(), 

Answer 3

添加返回false onsubmit

<code>
<form id="blogForm" onsubmit="return(false);">  
    <input type="date" name="date" id="blogDate">
    <input type="text" name="title" id="blogTitle">
    <textarea name="blogContent" id="blogBody"></textarea>
    <input type="submit" name="submit" id="blogSubmit">    
  </form>​
</code>

按下按鈕調用ajax

$("#blogSubmit").on('click',function(){      

$.ajax({
type:'POST', 
url:'****.php', 
data:$('#blogForm').serialize(),
success: function(responseSubmit) { blah blah etc...

});

Answer 4

您的textarea名稱是blogContent，但id是blogBody。 ＃選擇器使用id，而不是名稱。

Answer 5

你不應該刪除你的編輯器 - 他們通常使用JS來在每次擊鍵后更新隱藏的textarea，或者在表單提交時使用，這樣如果編輯器正確得到這一點就不應該有所作為。

我想這個問題正如Phillip建議的那樣 - 你的ID和名稱屬性不同。 所有其他人都很好。 當它序列化時，它必須使用ID，並且可能在你的腳本中，你希望這些名稱會出現（正常的表單提交會這樣做）。

由於您是通過$ POST發送的，只需執行var_dump（$ _ POST）; 在您的腳本中，然后將其記錄到控制台或在JavaScript中提醒它 - 看看通過AJAX發送到您腳本的確切內容。

如果textarea沒有任何名稱，那么你知道問題肯定是編輯器，如果是，請嘗試手動調用nicEditor的方法，這將更新隱藏的textarea。

Answer 6

如果您使用的是ajaxSubmit，那么來自任何文本編輯器的textarea的POST數據將無效。

所以你必須獲得值並將其放入隱藏字段然后你可以得到這樣的POST值：

<textarea id="safety" name="safety" style="width:600px;height:70px"></textarea>
<input type="hidden" name="safety_precautions" id="safety_precautions">

在ajaxsubmit之前

$('#safety_precautions').val(tinyMCE.get('safety').getContent());