Question

我正在构建一个动态表单创建器，允许用户添加表单元素并更改属性。我需要找到一种方法来在客户端存储这些数据，而不需要XML或JSON的复杂性。用户可以从文本框添加50个表单元素到radio到textarea。每个元素都有不同数量的可变变量。

我目前将它们存储在隐藏字段中，例如：

type:text, size:30, required:yes, top:30, left:30

type:textarea, cols:30, rows:5, top:50, left:60

我正在使用jquery添加每个项目和隐藏的内容。

var typeVariable = 'type:input';

var startPosLeft =  'left:' + Math.round($(newElem).offset().left$('.container').offset().left); 

var startPosTop =  'top:' + Math.round($(newElem).offset().top - $('.container').offset().top); 

var newElemValue = typeVariable + ',' + startPosTop + ',' + startPosLeft;

// creates hidden form elements to store data
$('<input>').attr({'type': 'text', value:newElemValue, 'name':'hidden' + newNumDivs,  id:'hID' + newNumDivs}).appendTo('.hiddenDiv');

这是存储和检索数据的最佳方式，无需进行大量的ajax调用
如何从字符串中调用特定元素，如：

类型：文字，尺寸：30，必填：是，上：30，左：30

我需要'text'而非'type：text'。

如何更新此字符串中的特定元素？如果size：30更改为size：50如何更改存储在隐藏字段中的数据并将其插入

type:text, size:50, required:yes, top:30, left:30

Answer 1

您应该将所有这些信息存储在JavaScript数组中，其中数组中的每个元素都是一个具有相应属性的对象，以表示用户正在创建的表单元素之一。您可以轻松添加元素并更新现有项目的属性。

// create empty array
var formElements = [];

// add a new element to the array
formElements.push( {
   type : "text",
   size : 50,
   required : "yes",
   top : 30,
   left : 30  
} );

// individual items in the array can have different properties,
// e.g., where the one above had "size" this one has "cols":
formElements.push( {
   type : "textarea",
   cols : 30,
   rows : 5,
   top : 50,
   left : 60       
} );

// later access the rows property of the 2rd element:
var rows2nd = formElements[1].rows;

// later change the size property of the 1st element:
formElements[0].size = 50;

// loop through the array and log the type of each element:
for (var i=0; i < formElements.length; i++) {
   console.log(formElements[i].type);
}

当您的用户准备提交时，您可以将数组序列化为JSON并在传统表单字段或Ajax中提交。

您的最新评论提示

更新。要“命名数组元素”，您使用对象而不是数组：

var formElements = {};

formElements["textTemplate"] = {
   type : "text",
   size : 50,
   required : "yes",
   top : 30,
   left : 30  
}
formElements["textareaTemplate"] = {
   type : "textarea",
   cols : 30,
   rows : 5,
   top : 50,
   left : 60  
};

或者你可以在一个语句中定义它们（注意嵌套的花括号）：

var formElements = {
        "textTemplate" :    {
                               type : "text",
                               size : 50,
                               required : "yes",
                               top : 30,
                               left : 30  
                             },    
        "textareaTemplate" : {
                               type : "textarea",
                               cols : 30,
                               rows : 5,
                               top : 50,
                               left : 60
                             }
};

然后得到一个“textareaTemplate”的“top”属性，你说：

formElements["textareaTemplate"]["top"];`
// or in dot notation
formElements.textareaTemplate.top;

循环浏览对象中的所有项目：

var currentItem;
for (var key in formElements) {
   currentItem = formElements[key];
   alert(currentItem["top"]);
}

有关详细信息，请参阅https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects。

如何使用数组通过隐藏的表单元素在Jquery中存储和检索数据

1 个答案: