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

Posted 2023-05-09

【中文标题】如何将表单值存储在 data() 对象中？

【英文标题】：How to store form values in data() object?

【发布时间】：2010-10-20 06:51:07

【问题描述】：

有没有一种简单的方法可以在提交后将表单数据存储在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');

【问题讨论】：

只是让你知道，我刚刚找到了一个 jQuery 方法：form.serialize()。我用一些新信息更新了我的帖子。

【参考方案1】：

你可以这样做：

$('#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 » children, myform » #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>

【讨论】：

这不处理选择和文本区域，也不处理通过按钮/图像提交的表单。它也没有解决状态/选择 - 没有提到，但我猜 OP 只需要 selected 单选和复选框值，而不是所有值 - 在任何一种情况下，值都需要是列表还是数组？

你是对的，但我只是将 bartclaeys 指向正确的方向（恕我直言）。不过，我会尽快更新代码。

谢谢莫夫！仍然需要大量代码（如果我想添加选择等）。以为周围有类似 SerializeToDataObject 的东西。