How to get the value of content that gets hidden or autogenerated?

Question

This question comes after solving my last question, I'd like to get some values out of the hidden forms but when I try to retrieve them only empty strings come by, I've considered just using arrays to store the information as it is introduced but I'd like to know if it's possible just to retrieve it afterwards and how.

Also, There is a table that is generated on the fly with some javascript:

function createTable(){
        if ( document.getElementById("invoiceFormat").rowNumber.value != ""){
            rows = document.getElementById("invoiceFormat").rowNumber.value;
        }

        var contents = "<table id='mt'><tr>";

        if ( document.getElementById("invoiceFormat").cb1[0].checked ){
            contents = contents + "<td class='htd'>Quantity</td>";
        }if (document.getElementById("invoiceFormat").cb1[1].checked ){ 
            contents = contents + "<td class='htd'>Description</td>";
        }if (document.getElementById("invoiceFormat").cb1[2].checked ){ 
            contents = contents + "<td class='htd'>Unitary Price</td>";
        }if (document.getElementById("invoiceFormat").cb1[3].checked ){ 
            contents = contents + "<td class='htd'>Subtotal</td>";
        }

        for (i=4; i<=k; i++){
            if (document.getElementById("invoiceFormat").cb1[i].checked ){
                contents = contents + "<td>" + document.getElementById("invoiceFormat").cb1[i].value + "</td>";
            }
        }


        contents = contents + "</tr>";

        for (j=1; j<=rows; j++){
            contents = contents + "<tr>";
            for (l=0; l<=k; l++){
                if (document.getElementById("invoiceFormat").cb1[l].checked ){
                hotfix = l +1;
                contents = contents + "<td> <input id='cell" + j + "_" + hotfix + "' name='cell' type='text' size='15' /> </td>";
                }
            }
            contents = contents + "</tr>";
        }

        contents = contents + "</table>";
        var createdTable = document.getElementById("mainTable");
        createdTable.innerHTML = contents;  

    }

After it's created I've tried to access it but without luck so far, I just can't get what the user inputs in the input fields that are created. How can I do this?

I'm using raw javascript with jQuery so answers with or without the library are welcomed :)

Answer 1

document.getElementById("invoiceFormat").cb1[3].checked First of all I do not know what ".cb1[3]" means here so I will ignore it and will tell you how I would solve this problem: (I assume that "invoiceFormat" is id of your form.) 1) in your form set name property of every field you have. that way you can reach them like document.getElementById("invoiceFormat").fieldName.value

if you will use this method make sure that put your form in a local variable. it will be a lot faster

var form = document.getElementById("invoiceFormat");
form.fieldName.value;

2) give every field you have a unique id and just use getElementById directly on fields not on form. I am not sue if this method is better, but I am useing second one all the time. I just get used to it I guess.

3) there is one more way but it might be an overkill. when you create your form fields, you can put them in an object(not values but the elements themselves) and even hide it in a closure. That way you can call something like

formElements.formFieldOne.value;