从具有 2 个不同输入的数组中获取值

Question

我正在尝试验证输入的动态数组，但我不知道该怎么做，这是我的 html:

<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">

当用户点击按钮时，流程会添加更多输入，如下所示：

<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">
<input type="text" class="form-control" name="studentContactDesc" placeholder="Description">
<input type="text"  class="form-control" name="studentContactPhone" placeholder="Phone">

每次用户单击按钮时，该过程都会添加相同的两行。

我正在读取数据：

$(document).on('click','#saveRecord',function() {
    $("input[name=studentContactDesc]").each(function() {
        alert($(this).val());
    });

    $("input[name=studentContactPhone]").each(function() {
        alert($(this).val());
    });
});

此函数首先读取所有描述字段，然后读取所有 phone 字段。

是否有任何方法可以读取具有 phone 的描述字段和具有相同顺序的其他字段？

Answer 1

您可以如下修改功能以同时提醒 description 和 phone 信息。

   $(document).on('click','#saveRecord',function() {
    var contact = $("input[name=studentContactDesc]");
    var phone =  $("input[name=studentContactPhone]");
    for(var i=0;i<contact.length;i++){
        alert(contact[i].value);
        alert(phone[i].value);
     }
   });

Answer 2

您可以将每组输入包装在 div 中并迭代 div。
<div class='item'> <input type="text" class="form-control" name="studentContactDesc" placeholder="Description"> <input type="text" class="form-control" name="studentContactPhone" placeholder="Phone"> </div>

<code>
$('.item').each(function(){
     var values = "";
     $(this).children('input').each(function() { 
         values += $(this).val() + " ";
    });
    alert(values);
 });
</code>

从具有 2 个不同输入的数组中获取值

Get the values from array with 2 differents inputs

html

javascript

jquery