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>

where is the element with the ID of izmena?

atmd
– atmd

2014-12-19 14:52:36 +00:00
Commented Dec 19, 2014 at 14:52 — atmd
– atmd, Commented Dec 19, 2014 at 14:52

T.J. Crowder · Accepted Answer · 2014-12-19 14:53:51Z

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();

Collectives™ on Stack Overflow

Getting undefined value from input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related