javascript - 从输入字段获取未定义的值

Question

所以我有一个页面，人们可以在其中随机生成一些输入字段，所以我需要获取每个输入的值并将其发送到我的 php 页面。

棘手的部分是我不知道最终会有多少个输入，因此我需要某种循环来获取所有值。这是我现在所拥有的，一切似乎都很好，我确实设法获取所有输入字段。但由于某种原因，每个输入字段的值似乎都未定义，有人知道为什么吗？

$(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

由于您正在 input 元素中查找 input 元素，因此您得到 undefined:

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

因为您没有(实际上不能)在其他input元素中有input元素， find 未找到任何内容，并且 val 返回 undefined。 (这是唯一情况，其中val返回未定义，顺便说一句:当您调用它的集合中没有元素时。否则它总是返回一个字符串，可能是空白字符串。)

这是最小的变化:

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

...但我可能会更直接一点:

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