Use each() after serializeArray() a form

Question

So I have a form like this:

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

Very simple one. It allow me to get name and email from my customers. With jQuery I have a button to allowing me to add more customers (name and email) to my form.

I need to echo these datas on each form changes, so I used this code:

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

With serializeArray() I can serialize all my datas into an array.

My problem is to show these datas like this using this serializeArray():

A. Hitchcock has this email address : a.hitchcock@psychose.com.
Q. Tarantino has this email address : q.tarantino@killbill.com.

Any help on how to do this please ?

charlietfl · Accepted Answer · 2015-07-25T23:29:31.017

Would suggest you wrap the pairs in a parent and ignore using 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>

Then map the values from the groups:

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

The objects created by serializeArray() would look like:

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

So parsing those would still require pairing indices to get the name and email anyaway

If you really wanted to do it you could use a for loop:

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>');
}

Looks really perfect. One question for you: what about a select instead a input as a second item ? — teamo, Jul 26 '15 at 00:21
if it is a select ...there is a pseudo selector `:input` that looks for all form controls...easy change http://api.jquery.com/input-selector/ — charlietfl, Jul 26 '15 at 00:23

score 1 · Answer 2 · answered Jul 25 '15 at 23:24

Without changing anything in your HTML code, you can separate names and emails in two Arrays like following code, and just concatenate them like you want in simple for loop:

Full 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);
    }
});

Hope that help you.

good thinking...appears you realized what I was trying to point out before — charlietfl, Jul 25 '15 at 23:35

Use each() after serializeArray() a form

2 Answers2