jQuery serialize() 省略了 textarea答案

【问题标题】：jQuery serialize() leaves out textareajQuery serialize() 省略了 textarea
【发布时间】：2013-07-16 13:12:59
【问题描述】：

当我使用 jQuery 的 serialize() 方法提交表单时，除了表单中的 textarea 之外，所有内容都会被提交。这是一个常见问题吗？我想不通。除了未定义的 textarea 之外，该表单有效？？？

<textarea form="new_note_form" id="note_text" name="note_text" required="required"></textarea>

【问题讨论】：

这不会发生在我身上。你怎么知道 <textarea> 被忽略了？
是您要序列化的元素中的文本区域吗？
我会在表单的所有值被序列化时提醒它们，即使我输入了一些文本，textarea 也是未定义的。你的意思是我必须做类似 $('#my_form textarea').serialize() ???
请注意，当 textarea 包含 readonly 属性时，serialize() 不会添加 textarea 值。我在你的例子中没有看到，但以防万一......
也许您在发送表单之前克隆了表单（即myForm.clone()），这会清空文本区域。这是一个已知且令人讨厌的错误：bugs.jquery.com/ticket/3016

标签： javascript jquery html forms serialization

【解决方案1】：

它不起作用直到您将name 属性添加到文本区域。

<textarea id="sLifeStyle3Content" name="sLifeStyle3Content" placeholder="HTML is allowed">
  <apex:outputText value="{!sLifeStyle3Content}" />
</textarea>

【讨论】：

【解决方案2】：

不，它没有。

它工作正常。 http://jsfiddle.net/nuBkM/

<form>
    <input name="foo" value="bar"/><br>
    <textarea name="something">lorem ipsum</textarea>
</form>

JavaScript

console.log($("form").serialize());
// => foo=bar&something=lorem+ipsum

.serializeArray 也可以使用

console.log($("form").serializeArray());
// => [{name: "foo", value: "bar"}, {name: "something", value: "lorem ipsum"}]

【讨论】：

OP 不起作用的原因是他们忘记了 name 属性
OP 发布了这个<textarea form="new_note_form" id="note_text" name="note_text" required="required"></textarea>。看起来它对我有一个name 属性。

【解决方案3】：

另一种解决方法是将 textarea 值转换为变量并通过 ajax 调用传递...

var 评论 = $('.note_comment').val();

           $.ajax({
               type: "POST",
               url: '/approot/rewrite.cfm/app.people/insertNote?format=json&Comment=' + comment,
               data: $("form[name='add_note_form']").serializeArray(),
               success: function(data)
               {
              alert('success');         
               }
             });

【讨论】：

【解决方案4】：

如果 textarea 由 tinyMCE 等编辑器控制，您可能需要调用 tinyMCE.triggerSave()，如 this answer 中所述。

【讨论】：

【解决方案5】：

在小提琴中工作正常。 http://jsfiddle.net/Ultimate/2Ey2A/ 使用

进行测试

$('button').click(function(){
    alert($('form').serialize());
});

【讨论】：

【解决方案6】：

我也有同样的经历。使用 $("#form_id").serialize() 提交表单不包括 textarea 字段。在过去 2 年中，这种行为在唯一具有 textarea 元素的表单中是一致的。我不时地重新检查表单和代码，以得出它应该可以工作的结论，但没有。

不出所料，我的解决方法是首先将文本区域的内容移动到隐藏的文本框中，然后序列化表单数据。

【讨论】：

【解决方案7】：

我们遇到了同样的问题，尽管设置了 name 属性，但 textarea 没有被序列化，并注意到它取决于 textarea 在表单中的放置位置。我们有幸将 textarea 移动到表单上的另一个位置来解决问题。

【讨论】：

【解决方案8】：

它会忽略 textarea ，除非您从 textarea 元素中删除 'form="new_note_form"'。

我知道这违反了良好的做法，但是，如果你想使用 jQuery 的序列化功能，你必须从 textarea 元素中删除这个属性。

【讨论】：

【解决方案9】：

这是我用来包含/排除表单中需要的每个元素的方法。即使某些元素仅定义了 id 而没有名称，此方法也使我们的旧表单可序列化。

$( 'textarea' ).each( function() { 
  $(this).attr( 'type', 'textarea' ); 
});

$( 'input:text:not( ".excluded" ), input:checkbox, input:radio, textarea' ).each( function() {

  if (!$(this).hasClass( 'answer' )) { 
    $(this).addClass( 'answer' ); 
  }

  if ( !$(this).attr( "name" ) && $(this).attr( 'id' ) ) { 
    $(this).attr( "name", $(this).attr("id") ); 
  }

});

然后我调用下面的函数来获取$( '.answer' ).change() 事件、页面导航和$('form').submit() 事件上的序列化数组。这种方法对我可以辨别的页面性能没有明显的负担。

function storeFormData() {
  var serializedData = $( ".answer" ).serializeArray();
  var formDataObj = serializedData;
  var formDataString = JSON.stringify(formDataObj);
  localStorage.setItem(fso_id, formDataString);
  return formDataString;
}

【讨论】：