How to store and retrieve data in Jquery using arrays via hidden form elements
<p>I am building a dynamic form creator that allows users to add form elements and change the properties. I need to find a way to store this data on the client side  without the complexity of XML or JSON. The user could add 50 form elements from text box to radio to textarea. Each element has a different number of changeable variables.</p>

<p>I am currently storing them in hidden fields values like:</p>

<pre><code>type:text, size:30, required:yes, top:30, left:30

type:textarea, cols:30, rows:5, top:50, left:60
</code></pre>

<p>I am using jquery to add each item and the hidden.</p>

<pre><code>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
$('&lt;input&gt;').attr({'type': 'text', value:newElemValue, 'name':'hidden' + newNumDivs,  id:'hID' + newNumDivs}).appendTo('.hiddenDiv');
</code></pre>

<ol>
<li><p>Is this the best way to store and retrieve data without doing a ton of ajax calls</p></li>
<li><p>How can I call a specific element from a string like: </p>

<p>type:text, size:30, required:yes, top:30, left:30</p></li>
</ol>

<p><strong>I will need 'text' not 'type:text' .</strong></p>

<p>How can I update a specific element in this string? If size:30 changes to size:50 how do I change this data stored in a hidden field and insert it into </p>

<pre><code>type:text, size:50, required:yes, top:30, left:30
</code></pre>
