Используйте каждый() после serializeArray() форма

Question

Так у меня есть форма, как это:

<form> 
    <input name="name" value="A. Hitchcock"> 
    <input name="email" value="a.hitchcock@psychose.com"> 
    <input name="name" value="Q. Tarantino"> 
    <input name="email" value="q.tarantino@killbill.com"> 
    ... 
</form> 

очень простой. Это позволяет мне получать name и email от моих клиентов. С jQuery у меня есть кнопка, позволяющая добавить в нашу форму больше клиентов (name и email).

Мне нужно повторить эти Данные по каждым изменениям формы, поэтому я использовал этот код:

$('.form-horizontal').on('change','input', function(){ 
    var dataArray = $('#list-items').serializeArray(); 
}); 

С serializeArray() я могу сериализовать все мои ДАННЫЕ в массив.

Моя проблема в том, чтобы показать эти ДАННЫЕ, как это с помощью этого serializeArray():

• A. Hitchcock имеет этот адрес электронной почты: a.hitchcock@psychose.com.
• Q. Tarantino имеет этот адрес электронной почты: q.tarantino@killbill.com.

Любая помощь в том, как это сделать, пожалуйста?

Answer 1

предложить Вам завернуть пары в родительском и игнорировать, используя serializeArray()

<form> 
    <div class="person"> 
     <input name="name[]" value="A. Hitchcock"> 
     <input name="email[]" value="a.hitchcock@psychose.com"> 
    </div> 
    <div class="person"> 
     <input name="name[]" value="Q. Tarantino"> 
     <input name="email[]" value="q.tarantino@killbill.com"> 
    </div> 
</form> 

Затем отображают значения из групп:

var res = $('.person').map(function() { 
    var $inputs = $(this).find('input'); 
    return '<li>' + $inputs.eq(0).val() + ' has this email address :' + $inputs.eq(1).val() + '</li>' 
}).get(); 

$('#list').append(res.join('')); 

DEMO

Объекты, созданные serializeArray(), будут выглядеть так:

[{ 
    "name": "name[]", 
    "value": "A. Hitchcock" 
}, { 
    "name": "email[]", 
    "value": "a.hitchcock@psychose.com" 
}, { 
    "name": "name[]", 
    "value": "Q. Tarantino" 
}, { 
    "name": "email[]", 
    "value": "q.tarantino@killbill.com" 
}] 

Так разборе тех, будут по-прежнему требуют индексов спаривания, чтобы получить имя и адрес электронной anyaway

Если вы действительно хотите сделать это, Вы можете использовать for цикл:

var res= []; 
for(var i=0; i< arr.length; i=i+2){ 
    res.push('<li>' + arr[i].value + ' has this email address :' + arr[i+1].value + '</li>'); 
} 

Answer 2

, не меняя ничего в вашем HTML-коде вы можете отделить names и emails в двух Arrays, как и следующий код, и просто объединить их, как вы хотите, в простой for цикл:

Полный Js:

$('.form-horizontal').on('change','input', function(){ 
    var names = $("form input[name='name']").serializeArray(); 
    var emails = $("form input[name='email']").serializeArray(); 

    for(var i=0;i<=names.length;i++){ 
     alert(names[i].value+" has this email address : "+emails[i].value); 
    } 
}); 

Надеется, что поможет вам.