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.

Answer 3

It is very easy in jquery. you can do this as:

 types = []; $("input[name='additionaltitlename']").each(function() { types.push($(this).val()); }); console.log(types);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="additionaltitlename1" name="additionaltitlename" class="form-control" value="abc"> <input type="text" id="additionaltitlename2" name="additionaltitlename" class="form-control" value="xyz">

Answer 4

Means:

str = '';
$("input[type='text']").each(function() {
str = str + '|' + $(this).val();
});

or

str = '';
$("input[name='additionaltitlename']").each(function() {
str = str + '|' + $(this).val();
});

?

Answer 5

In addition to @gdoron's or @macek's answer which are probably the way to go, I'd like to add that all that is wrong with the code you have posted is that you have one } too much. This works (although it still has room for improvement):

$('#getpreviewbutton').click(function(){

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

});​

See: http://jsfiddle.net/8XJcc/

I don't know which browser you are using but using sth like Firebug or the Chrome Dev Tools can be pretty handy to spot simple mistakes like this. See this reference for Chrome or this one for Firefox. Even IE has one - just press F12.