從動態創建的輸入和選擇字段中獲取值

Question

所以我在此頁面上，人們將能夠動態創建輸入和選擇字段，並且由於我不知道有多少輸入和選擇字段，他們會基於我將如何獲取每一個值的想法而產生某種想法其中之一，這樣我就可以通過ajax將它們發送到我的php頁面。

我認為也許一個好主意是嘗試遍歷每個div並獲取select和input字段的值，但是我不知道該怎么做。 這是用戶創建了幾個輸入和選擇字段后html的外觀：

<div id="izmena_arhitekte">
        <div class="headlinea">Arhitekte</div>
        <div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="Zeljko Bogicevic" id="arh_ime1"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip1" class="form-control upis-style">
      <option selected="" value="Projektant">Projektant</option>
      <option value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div><div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="Nikola Kojic" id="arh_ime2"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip2" class="form-control upis-style">
      <option value="Projektant">Projektant</option>
      <option selected="" value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div>
    <div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="" id="arh_ime3"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip3" class="form-control upis-style">
      <option value="Projektant">Projektant</option>
      <option value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div>   
    </div>  

Answer 1

您可以使用$.each(); jQuery的功能。

$(function() {
    var collection = $('.form-group');
    var data = [];
    $.each(collection, function(idx, obj) {
        data.push({'input': $(obj).find('input').val(), 'select': $(obj).find('select').val()});
    });
    console.log(data);
});

Answer 2

給每個輸入或選擇字段一個類，該類是動態添加的。 例如，假設我給了類名“ inputField”。 然后訪問所有值：

var arr=[];
$(".inputField").each(function(){
    arr.push($(this).val());
});

因此，現在arr數組將具有所有動態插入的輸入字段的值。

Answer 3

基本方法

• 使用.each（）遍歷每個div
• 使用find（）在該div中選擇感興趣的字段
• 將數據放入數組
• 理想情況下，在您的輸入上使用類而不是id，則它們更易於選擇。

碼

var data = [];
$('div.form-group').each(function () {
    data.push({
        name: $(this).find('input').val(),
        project: $(this).find('select').val()
    });
});
console.log(data);

Answer 4

使用javascript，您可以使用querySelectorAll查找所有字段：

var a = document.querySelectorAll('input[type=text]');
    for (var i = 0;i<a.length;i++){
    console.log(a[i].value);
    }
    var b = document.querySelectorAll('option:checked');
    for (var x = 0;x<b.length;x++) {
    console.log(b[x].value);    
    }
});

例如，您可以將其放在EventListener函數中，然后單擊按鈕或您想聽的任何事件都可以獲取所有條目。