Getting undefined value from input field

Question

So I have a page where people will be able to randomly generate some input fields, so I need to get the value of every single input and send it to my php page.

The tricky part is that I don't know how many inputs will there be in the end, and therefor I need some kind of a loop to pick all the values up. Here is what I have right now, everything seems to be ok and I do manage to get all the input fields. But for some reason values of every input field seems to be undefined, does anyone know why?

$(document).on('click', '#izmena', function(){
    $(function() {
        var collectionA = $('.crtezInput');
        var datas = [];
        $.each(collectionA, function(idx, obj) {
            datas.push({ 'input': $(obj).find('input').val() });
        });
        $.each(datas, function(idx, obj) { 
            crtezNaziv += obj.input +","; 
        });
        console.log(crtezNaziv);        
    });

<div id="izmena_crteza">
    <div class="headlinea">Crtezi</div>
    <div class="crtez-form">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Naziv" value="Glavni izgled">  
        <i title="Obrisi Arhitektu" style="margin-top: -18px;" class="fa fa-times fa-2x deleteArh"></i>
        <input type="text" style="margin-top:-20px; width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Razmera" value="1:100">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Tehnika" value="Tus">
    </div>
    <div class="crtez-form">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Naziv" value="Izgled sa strane"> 
        <i title="Obrisi Arhitektu" style="margin-top: -18px;" class="fa fa-times fa-2x deleteArh"></i>
        <input type="text" style="margin-top:-20px; width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Razmera" value="1:100">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Tehnika" value="Tus">
    </div>
    <div class="crtez-form">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Naziv" value="Presek a-b">  
        <i title="Obrisi Arhitektu" style="margin-top: -18px;" class="fa fa-times fa-2x deleteArh"></i>
        <input type="text" style="margin-top:-20px; width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Razmera" value="1:100">
        <input type="text" style="width:80%; margin-bottom:10px;" class="form-control upis-style crtezInput" placeholder="Tehnika" value="Tus">
    </div>
</div>

Answer 1

You're getting undefined because you're looking for input elements within your input elements:

var collectionA = $('.crtezInput');
var datas = [];
$.each(collectionA, function(idx, obj) {
    datas.push({'input': $(obj).find('input').val()});
    // Here -------------^^^^^^^^^^^^^^^^^^^^^^^^^^
});

Since you don't (and indeed can't ) have input elements within other input elements, find doesn't find anything, and val returns undefined . (This is the only case where val returns undefined , btw: When the set you call it on has no elements in it. Otherwise it always returns a string, possibly a blank one.)

Here's the minimal change:

var collectionA = $('.crtezInput');
var datas = [];
$.each(collectionA, function(idx, obj) {
    datas.push({'input': $(obj).val()});
});

...but I'd probably make that a bit more direct:

var collectionA = $('.crtezInput');
var datas = collectionA.map(function() {
    return {input: this.value};
}).get();