保存使用jquery生成的表单的元数据

保存使用jquery生成的表单的元数据,jquery,ruby-on-rails,Jquery,Ruby On Rails,我使用jquery动态生成具有以下html的表单: <div id="form_container"> <h1><a>Untitled Form</a></h1> <form action="save_form" method="post" id="newform" name="newform"> <div class="form_description">

我使用jquery动态生成具有以下html的表单:

<div id="form_container">
        <h1><a>Untitled Form</a></h1>
        <form action="save_form" method="post" id="newform" name="newform">
          <div class="form_description">
            <h2 class="editable">Form title. Click here to edit</h2>
            <p class="editable">This is your form description. Click here to edit.</p>
          </div>
          <ul id="form_body" class="ui-sortable">
          <li id="field1" class="world">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="field1">Text1</label>
            <input type="text" name="field1" value="">
            </a>
        </li>
        <li id="field2" class="world">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="field2">Paragraph2</label>
            <textarea cols="" rows="" class="textarea" name="field2"></textarea>
            </a>
        </li>
        <li id="field3" class="world">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="field3">Label3</label>
            <span id="field3">
            <input type="radio" id="field31" name="radiogroup" value="1" class="element radio">
            <label class="choice editable">option1</label>
            <input type="radio" id="field32" name="radiogroup" value="2" class="element radio">
            <label class="choice editable">option2</label>
            <input type="radio" id="field33" name="radiogroup" value="3" class="element radio">
            <label class="choice editable">option3</label>
            </span>
            </a>
        </li>
        </ul>
        </form>
我尝试了$('#newform').serialize(),但它似乎只用于获取字段的名称/值对(如field1=&field2=),而不获取有关字段类型的信息

如何获得标题、标签等无表单字段

我是否必须获取#form_容器的DOM节点并查找某些硬编码的值? 有更好的方法吗

我正在使用jquery和rails(2.3.5)

谢谢你的帮助

更新

根据乔伊的回答,我想出了以下适合我的代码:

$('#newform').find('input').each(function () {
    fields.push({
        name: $(this).attr('name'),
        type: $(this).attr('type'),
        text: $(this).val(),
        class: $(this).attr('class')
    });
    var label = $("label[for='" +  $(this).attr('name') + "']");
    if(label.length != 0) {
        fields.push({
            name: "label",
            type: 'label',
            text: label.text(),
            class: label.attr('class')
        });
    }
});

var form = {
    title: $('.form_description h2').text(), // or whatever the title is
    description: $('.form_description p').text(),
    fields: fields
};

console.log(JSON.stringify(form));

您必须自己制作对象:

var fields = [];
$('#myFormTitle').find('inputs').each(function () {
  fields.push({name: $(this).attr('name'), type: $(this).attr('type'), text: $(this).val(), class: $(this).attr('class'), });
});

var form = {
  title: $('#myFormTitle').text(), // or whatever the title is
  description: 'This is a form',
  fields: fields
};
然后您可以存储它(这只是许多选项中的一个):


谢谢你给我指明了正确的方向。我正在用对我有用的最终代码更新帖子。
var fields = [];
$('#myFormTitle').find('inputs').each(function () {
  fields.push({name: $(this).attr('name'), type: $(this).attr('type'), text: $(this).val(), class: $(this).attr('class'), });
});

var form = {
  title: $('#myFormTitle').text(), // or whatever the title is
  description: 'This is a form',
  fields: fields
};
window.locationStorage.setItem('form', JSON.stringify(form));
var form = JSON.parse(window.localStorage.getItem('form'));