Question

i have a form tag and users can dynamically create the form by clicking on the elements they would want to be in that form . By clicking the elements get appended inside the form tag .

This is the function that is called .

function add_element(element)
{
    var startdiv = "<div class='form_content_middle_box' id = 'div"+i+"' onclick='javascript:edit(\""+element+"\",\""+i+"\");'> <a href='javascript:void(0);' onclick='javascript:remove("+i+");'>Delete</a></br>";
    var enddiv = "</div>";

    switch(element)
    {
        case 'textbox' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled Textbox</label><p id='paragraph"+i+"'><input type = 'text' id='"+i+"'/></p>" + enddiv);
            form_elements.push(element);
            //alert(form_elements);
        break;
        case 'number' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled Textbox</label><p id='paragraph"+i+"'><input type = 'number' id='"+i+"'/></p>" + enddiv);
            form_elements.push(element);            
        break;
        case 'textarea' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled Textarea</label><p id='paragraph"+i+"'><textarea id='"+i+"'></textarea></p>" + enddiv);
            form_elements.push(element); 
           // alert(form_elements);
        break;
        case 'checkbox' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled Checkbox</label><p id='paragraph"+i+"'><input type = 'checkbox' id='"+i+"' /></p>" + enddiv);
            form_elements.push(element);
        break;
        case 'radio' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled MultipleChoice</label><p id='paragraph"+i+"'><input type = 'radio' id='"+i+"'/></p>" + enddiv);
            form_elements.push(element);
        break;
        case 'dropdown' :
            $('#myform_container').append(startdiv + "<label id='label"+i+"'>Untitled SelectBox</label><p id='paragraph"+i+"'><select id='"+i+"'><option></option></select></p>" + enddiv);
            form_elements.push(element);
        break;

        default:
        break;
    }

    i++;
}

After the form has been created , the user will click on save and i need to save that form ,
i want to know a way to get all the elements and the values that the user has appended.A way to save the form along with all the elements in an array or something

Answer 1

Try

var myElements=$('#myformID').find('input, textarea, button, select')

The variable myElement will be cast to an array and will have all the elements in the form.

Iterating through the variable myElements[index] will give the form element and
myElements[index].value will give the form elements value