StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to store and retrieve data in Jquery using arrays via hidden form elements
text
Body
copied!<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 $('<input>').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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload