jQuery $('form').serialize()只返回序列化表单的一个元素

Question

给出以下形式:

<form id="form" name="form">
<input name="name"/>
<input name="version"/>
<input name="template"/>
<textarea name="elements"></textarea>
<textarea name="features"></textarea>
<textarea name="layout"></textarea>
<input type="submit" value="Save"/>
</form>

和javascript(使用jQuery 1.3.2):

$(function() {
    $('#form').bind('submit',function() { alert($('#form').serialize()); return false; });
    });

从上面的javascript警报提交上述表单的输出是:

elements=...

where ...是元素字段中包含的内容.

我希望$('#form').serialize()返回一个字符串,如:

name=&version=&template=&elements=&features=&layout=.

我注意到$('input,textarea').serialize()确实执行了预期的行为(即返回"name =&version =&template =&elements = asdafe&features =&layout ="),但是我很好奇为什么$ ('#form')版本只返回"elements =".

我在Safari 4和Firefox 3.5上试过这个,所以我很有信心这是我所缺少的.

谢谢阅读.

Answer 1

这是你的textarea的名字,它正在抛弃它.

这是它如何崩溃.在DOM中,form节点有几个特殊属性,最值得注意的是这两个属性(按此顺序公开)

1. 的elements集合,它是一种的HTMLCollection所有表单控件的(等几个其他节点<fieldset>元件)
2. 表单中每个命名元素的属性(即具有name属性的表单控件)

由于你有一个<textarea>名为"elements"的名字,这有效地覆盖了elements上面#1中提到的内置集合,这就是为什么当你序列化表单时,你看到的只是

elements=****

因为该单个表单元素已覆盖整个集合.

短解决方案？将表单元素重命名为不是现有DOM属性的值(您也<input name="name"/>属于此类别)