隠しフォーム要素を使用して配列を使用してJqueryでデータを格納および取得する方法

Question

フォーム要素を追加してプロパティを変更できる動的フォーム作成者を作成しています。私はXMLやJSONの複雑さなしにクライアント側にこのデータを格納する方法を見つける必要があります。ユーザーはテキストボックスからラジオにテキストエリアまでの50のフォーム要素を追加できます。各要素には異なる数の変更可能な変数があります。私は、各項目と隠しを追加するためにjqueryのを使用しています

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

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

：

私は現在のように隠されたフィールド値に格納しています。

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

1. AJAXのトンを行うことなく、データを格納および取得するための最良の方法は、

私のような文字列から特定の要素を呼び出すことができますどのように

2. 呼び出し、このです：

   タイプ：テキスト、サイズ：30、必要な：はい、トップ：30、左：30

私がします'text：'は 'type：text'ではありません。

この文字列の特定の要素を更新するにはどうすればよいですか？もしサイズ：サイズ30の変更：50私は隠しフィールドに格納され、このデータを変更し、

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

Answer 1

あなたはJavaScriptの配列、配列の各要素に、その情報の全てを格納する必要がありますに挿入しない方法ユーザーが作成しているフォーム要素の1つを表す適切なプロパティを持つオブジェクトです。既存のアイテムの要素を簡単に追加したり、プロパティを更新したりすることができます。ユーザーは、あなたがJSONに配列をシリアライズし、従来のフォームフィールドやAjaxを経由して提出することができ提出する準備ができている

// 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); 
} 

。

更新日最新のコメントで尋ねられます。 （入れ子の中括弧に注意してください）

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 
}; 

それとも、1つのステートメントですべてを定義することができます：

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」のために、たとえば、「トップ」プロパティを取得あなたが言う：オブジェクト内のすべてのアイテムをループ

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を参照してください。