StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should be storing all of that information in a JavaScript array, where each element in the array is an object with the appropriate properties to represent one of the form elements your user is creating. You can easily add elements and update properties of existing items.</p> <pre><code>// 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); } </code></pre> <p>When your user is ready to submit you can serialise the array to JSON and submit in a conventional form field or via Ajax.</p> <p><strong>UPDATE</strong> prompted by your latest comment. To "name the array elements" you use an object instead of an array:</p> <pre><code>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 }; </code></pre> <p>Or you can define them all in a single statement (note the nested curly braces):</p> <pre><code>var formElements = { "textTemplate" : { type : "text", size : 50, required : "yes", top : 30, left : 30 }, "textareaTemplate" : { type : "textarea", cols : 30, rows : 5, top : 50, left : 60 } }; </code></pre> <p>Then to get, say, the "top" property for a "textareaTemplate" you say:</p> <pre><code>formElements["textareaTemplate"]["top"];` // or in dot notation formElements.textareaTemplate.top; </code></pre> <p>To loop through all items in the object say:</p> <pre><code>var currentItem; for (var key in formElements) { currentItem = formElements[key]; alert(currentItem["top"]); } </code></pre> <p>For more information see <a href="https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects" rel="nofollow">https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects</a>.</p>

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