Question

我使用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>

我想将有关表单的元数据序列化到数据库并稍后重新创建。

- form title
- form description

Fields:
  - field name
  - field type
  - field_text
  - css class (if possible)

我尝试了$（'＃newform'）。serialize（）但它似乎对获取字段的名称/值对很有用，例如field1 =＆amp; field2 =并且没有关于字段类型的信息

如何获得标题，标签等表单字段？

我是否必须获取#form_container的DOM节点并查找某些硬编码值？有没有更好的方法呢？

我正在使用jquery和rails（2.3.5）

感谢您的帮助。

更新

根据Joey的回答，我想出了以下对我有用的代码：

$('#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));

Answer 1

你必须自己制作这个物品：

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'));

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

1 个答案: