Create arrays from input in a cycle JavaScript

Question

I am currently saving user input within an accordion into arrays.

My Accordion is dynamic and on click, another accordion column with input fields is created:

var i = 1 ;
        function AddPanel()
        {
        $('.accord').append('<h3 style="background:none;background-color:#C8C8C8  ;">Job Nr.'+i+'</h3>'
            +'<div style="background:none;background-color:#E0E0E0;">'
                +'<div>'
                    +'<form name="myForm">'
                        +'<table class="wrapper">'
                            +'<tr>'
                                +'<td style="text-align: left">First Digit:'
                                +'<div> <input type="text" name="Job['+i+'][0]" /></td>'
                                +'<td style="text-align: left">System:'      
                                +'<div> <input  type="text" name="Job['+i+'][1]" /></td>'
                                +'<td style="text-align: left">SAP Modul:'  
                                +'<div> <input  type="text" name="Job['+i+'][2]" /></td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td style="text-align: left">Country:' 
                                +'<div> <input  type="text" name="Job['+i+'][3]" /></td>'
                                +'<td style="text-align: left">Duration:' 
                                +'<div> <input  type="text" name="Job['+i+'][4]" /></td>'
                                +'<td style="text-align: left">Step Number:' 
                                +'<div> <input  type="text" name="Job['+i+'][5]" /></td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td style="text-align: left">Optional Text:'
                                    +'<div>' 
                                    +'<textarea align="left" name="Job['+i+'][6]" cols="20" rows="2"></textarea>'
                                    +'</div>'
                                +'</td>'
                            +'</tr>'
                        +'</table>'
                    +'</form>'
                +'</div>'
            +'</div>')
        $('.accord').accordion("refresh"); 
        i++;
        }           

Theoretically the user is able to dynamically make hundreds of inputs into a 2d Array.

My question now is: How would I be able to store and later on retrieve all inputs of the 2d array within a cylce?

I tried it lie It was suggested by tborychowski: `

        var form = document.getElementsByName('myForm');
        field = form.elements['Job[0][0]'];
        formData = [], i = 0, j = 0;

        while (field) {
        formData[i] = [];
        j = 0;
        while (field) {
        formData[i].push(field.value);
        field = form.elements['Job[' + i + '][' + (++j) + ']'];
        }
        field = form.elements['Job[' + (++i) + '][0]'];
        }
        console.dir(formData);
        `

I tried this in lots of different ways and googled for hours but I can not get it to work.

Sorry, I am a real beginner with this.

Thanks in advance!

Answer 1

I've created a demo (an example) of what you can do. The basic idea (if I understand you correctly) is to name the form fields using loop indexes, like this:

<input type="text" name="Job[0][0]"/>
<input type="text" name="Job[0][1]"/>

So the first digit would be the group/set index, and the second - field index within that group/set.

Than - you just need to loop through these fields and no matter how many sets or fields in a set there is - you can gather all the values in an array, e.g.:

var form = document.getElementById('myForm'),
    field = form.elements['Job[0][0]'],
    formData = [], i = 0, j = 0;

while (field) {
    formData[i] = [];
    j = 0;
    while (field) {
        formData[i].push(field.value);
        field = form.elements['Job[' + i + '][' + (++j) + ']'];
    }
    field = form.elements['Job[' + (++i) + '][0]'];
}

console.dir(formData);

I didn't use jquery here (with jquery it could be even easier).

Is this what you are looking for?

DEMO

Answer 2

depending on your scope, you could do something like this:

var a0 = 6, a1 = 5, a2 = 4, a3 = 2;

for (var i = 0; i < 4; i++) {
   console.log(window['a' + i]);
}

so - if window is the scope your variables are in, you can use it like in the example above.

Otherwise - if that's not possible - you could create an array of values instead of separate variables, like so:

'<input  type="text" name="Job['+i+'][]" />'

If you choose this approach - what I would do is add an index class (to make it easier for jquery, to the wrapper element (that encompasses all inputs of the same index), e.g.:

'<table class="inputs' + i + '">'+
   ---- inputs go here ----
'</table>'+

then loop through them and get the values, like so:

var jobs = [], idx = 0, inputs = $('.inputs' + idx);

while (inputs.length) {
    inputs.find('input[name^=Job]').function(index, inputField) {
        jobs[idx][].push($(inputField).val());
    });

    idx++;
    inputs = $('.inputs' + idx);
}