Load array from dynamically created input fields

Question

I have a page that creates a number of inputs based on the user's selection of how many to create:

select id="noOfDirectors" name="amount" onchange="addInput();">
 <option value="">How Many Directors</option> 
 <option value="1" >1</option>
 <option value="2" >2</option>
 <option value="3" >3</option>
 <option value="4" >4</option>
 <option value="5" >5</option>
 <option value="6" >6</option>
 <option value="7" >7</option>
 <option value="8" >8</option>
 <option value="9" >9</option>
 <option value="10" >10</option>
</select>
<div id="inputs"></div><br/>
<button id="nod" onclick="return false">Submit</button>

The .js file creates the forms:

function addInput(){
noOfDirectors = $('#noOfDirectors').val();
var inputs = $('#inputs').empty();
inputs.innerHTML = "";
for(i = 0; i < noOfDirectors; i++) {
 inputs.append('Director '+ (i+1) +' Name: <input type="text" name="directorName[' + i + ']" /><br/>Director '+ (i+1) +' Customer Number: <input type="text" name="directorECN['+i+']" /><br/><br/>');
}
$("#nod").show();
directors = $('[name^=directorECN]').map(function(i) {
//return this.name;
 return this.value; // for real values of input
}).get();
}
$(document).ready(function() {
 $('#nod').click(function() {
 console.log(directors);
 });
});

Now, I want to take each of those directorECN['+i+'] input names and add them to a globally declared array:

var directors = new Array ();

I am having a hard time figuring out a syntax that works without hard coding 10 (0-9) of each of the possible input names. Is there an easier way to do this?

Here is my UPDATED JSFiddle

Updated my JS above. Console is printing [""]

• A. Wolff: You didn't explain why would you need that, but sounds like you just want to serialize the FORM, see: api.jquery.com/serialize or api.jquery.com/serializearray
• jpgerb: later in the code, I need to list out at different times after I sort the inputs.

Answer 1

You can use .map() to get the array from name attribute of elements returned by Attribute Starts With Selector [name^="value"].

var directors = $('[name^=directorECN]').map(function(i) {
 //return this.name;
 return this.value; // for real values of input
}).get();

• VisioN: Don't forget about .get() in the end. It will return pure JS array instead of jQuery collection object.
• A. Wolff: I think OP meant by name actually value of input
• Shaunak D: @A.Wolff, I think OP has already defined global var directors = new Array();. But again uses var directors inside the function. [] returned is for global variable.
• Shaunak D: @jpgerb, remove var from var directors = ...map() inside the function.
• A. Wolff: @jpgerb You know, you should call it on submit click event then, otherwise, no inputs is filled with value: jsfiddle.net/j3cfyrkp/3 BTW, need to fix your jsFiddle to make it works. Now, you still doesn't really explain what is your expected behaviour, getting name or value?! And finally, i'm still quite sure you just want to serialize the FORM

Answer 2

Use .map() function over the attribute starts with selector [attribute^="value"]

var directors = $('[name^="directorECN"]').map(function () {
 return this.name //to get value use this.value
}).get();

Updated Fiddle

• Shaunak D: @A.Wolff, the answer did not return actual name array, which was edited later , Still I'd ask, should I remove mine?
• A. Wolff: I'm not mod but i think it's ok then