How to store and retrieve data in Jquery using arrays via hidden form elements

Question

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.

I am currently storing them in hidden fields values like:

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

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

I am using jquery to add each item and the hidden.

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. Is this the best way to store and retrieve data without doing a ton of ajax calls

2. How can I call a specific element from a string like:

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

I will need 'text' not 'type:text' .

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

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

Answer 1

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.

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

When your user is ready to submit you can serialise the array to JSON and submit in a conventional form field or via Ajax.

UPDATE prompted by your latest comment. To "name the array elements" you use an object instead of an array:

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

Or you can define them all in a single statement (note the nested curly braces):

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

Then to get, say, the "top" property for a "textareaTemplate" you say:

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

To loop through all items in the object say:

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

For more information see https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects.