表单中的 Textarea 未使用 jQuery AJAX 通过 POST 提交

Posted 2023-02-24

【中文标题】表单中的 Textarea 未使用 jQuery AJAX 通过 POST 提交

【英文标题】：Textarea in a form is not submitting via POST with jQuery AJAX

【发布时间】：2012-07-29 17:57:14

【问题描述】：

由于我不知道的原因，我的表单没有提交输入到我的<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 中检查时，我得到的 POST 是： date=09%2F25%2F1986&title=Title&blogContent=

如您所见，blogContent 为空。这是为什么呢？

【问题讨论】：

我看不出你发布的内容有什么明显的错误，根据我的经验，jQuery 序列化 <textarea> 元素很好。 $.ajax() 函数何时被调用？

也许这有助于forum.jquery.com/topic/textarea-and-ajax-with-serialize-help

数据中是否有换行符？可能是这个问题：***.com/questions/4115457/…

是 blogContent 不仅仅是一个文本区域吗？即——它是tinymce/ckeditor吗？

它在this fiddle 中工作得很好。

【参考方案1】：

我没有提到我在文本区域附加了一个所见即所得的编辑器，称为 nicEditor。显然有一个错误迫使 jQuery 不序列化 textarea。一旦 nicEditor 被移除，它就可以正常工作了。感谢大家的帮助。

【参考方案2】：

变化：

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

收件人：

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

【参考方案3】：

您的文本区域名称是 blogContent，但 id 是 blogBody。 # 选择器使用 id，而不是名称。

【讨论】：

选择器使用表单的id

【参考方案4】：

您不需要删除您的编辑器 - 它们通常通过在每次击键后或表单提交时使用 JS 更新隐藏的文本区域来工作，因此只要编辑器正确，就不会产生影响.

我想问题是 Phillip 建议的 - 您的 ID 和 name 属性不同。所有其他都匹配得很好。当它序列化时，它必须使用 ID，并且大概在另一端的脚本中，您希望名称会出现（正常的表单提交会这样做）。

由于您是通过 $POST 发送的，因此只需执行 var_dump($_POST);在您的脚本中，然后将其记录到控制台或在您的 javascript 中提醒它 - 查看通过 AJAX 发送到您的脚本的确切内容。

如果 textarea 不存在任何名称，那么您知道问题肯定是编辑器，如果是，请尝试手动调用 nicEditor 的方法，这将更新隐藏的 textarea。

【参考方案5】：

如果您使用 ajaxSubmit，则任何文本编辑器的 textarea 中的 POST 数据都将不起作用。

因此，您必须获取值并将其放入隐藏字段，然后您可以像这样获取 POST 值：

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

在 ajax 提交之前

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

【参考方案6】：

添加return 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...

);