Get array of values from multiple inputs using jQuery

Question

Can someone please let me know how to get values from several input fields?

I have a list with several inputs like this:

<li>
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... />
</li>
<li>
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... />
</li>

I have a solution in Javascript (on form submit):

...
var extratitles = document.getElementsByName('additionaltitlename'); 
var str = '';
      for (var i = 0; i < extratitles.length; i++) { 
      str = str + '|' + extratitles.item(i).value;
    } 
}

How do I do the same thing in JQuery?

Answer 1

It's not valid to have two inputs of the same name. If you want to do this, you can use <input name="titles[]">

You can try this:

<input name="titles[]">
<input name="titles[]">
​<button>submit</button>​​​​​​​​​​​​​​​​​​​​​​​

With this jQuery

// click handler
function onClick(event) {
  var titles = $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();

  console.log(titles);
  event.preventDefault();
}

// attach button click listener on dom ready
$(function() {
  $('button').click(onClick);
});

See it working here on jsFiddle

EDIT

This answer gives you the titles in an array instead of a string using a | separator. Personally, I think this is a lot more usable.

If you're just submitting the form and you want to support multiple values, use the .serialize method as described in the other answer

Answer 2

Use jQuery's native serialize function:

var data = $('input[name="additionaltitlename"]').serialize();

docs

The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements.