如何在data()对象中存储表单值?

时间:2009-04-18 12:17:01

标签: jquery forms dom

提交后,是否有一种简单的方法可以在data()对象中存储表单数据?

假设这是我的表格:

<form id='myform'>  
<input type='text' name='bar' value='lorem'/>  
<input type='text name='foo' value='ipsum'/>  
</form>

提交后数据应该像这样存储:

$("#myform").data('bar','lorem');  
$("#myform").data('foo','ipsum');

1 个答案:

答案 0 :(得分:3)

您可以这样做:

$('#myform').submit(function(e) {
    e.preventDefault(); // don't submit the form
    var form = $(this); // store it for later reference
    form.children('input').each(function() {
        form.data($(this).attr('name'), $(this).attr('value'));
    });
});

修改:我的代码中有一些错误(getChildren»childrenmyform»#myform) - 我现在已更正它

请注意,此脚本不提交表单。您可以添加some nifty ajax来做:) http://docs.jquery.com/Ajax/serialize

更新:实际上,jQuery已经内置了此功能:form.serialize()。它返回一个有效的查询字符串:

<form id="myForm">
    <input type="radio" value="A" name="foo" checked="checked" /> A<br />
    <input type="radio" value="B" name="foo" /> B
    <input type="text" name="bar" value="Bla bla" />
</form>
<script>
var queryString = $('#myForm').serialize(); //foo=A&bar=Bla+bla
</script>