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?

score 37 · Accepted Answer · edited Feb 20 '15 at 07:54

37

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

edited Feb 20 '15 at 07:54

mpapec

50,217
8
67
127

answered Mar 25 '12 at 09:33

maček

76,434
37
167
198

Why not using `this.value`? Is it really necessary to use _jQuery_ for every simple operation? – Iulian Onofrei Apr 08 '14 at 12:04
@IulianOnofrei, [you tell me if it's necessary](https://github.com/jquery/jquery/blob/master/src/attributes/val.js#L10-L69). The point of the using a lib like jQuery is to a) alleviate concern for a majority of corner cases, and b) provide a consistent, intuitive api. Yes, for INPUT elements, you can use `this.value` pretty reliably, but that changes for things like SELECT. Either way, jQuery doesn't care and gives you an intuitive `.val` method to work in any scenario. – maček Apr 08 '14 at 20:44
1

@IulianOnofrei, furthermore, I provided answer that utilizes jQuery and written using jQuery idioms *because* this question was tagged with `jquery`. If this was a vanilla JavaScript question, I would've answered it completely differently. – maček Apr 08 '14 at 20:54
Aha, I understood, thanks. I get mixed feeling about this `jQuery` frenzy and I didn't know that even `value` has corner cases. – Iulian Onofrei Apr 08 '14 at 23:07
1

"It's not valid to have two inputs of the same name." Perhaps, I'm misunderstanding but this [post](https://stackoverflow.com/questions/2906793/is-it-valid-to-have-two-input-elements-with-the-same-name) seems to disagree. Also, doesn't using `titles[]` as the name for both inputs contradict the statement that names must be unique. – James Apr 05 '19 at 21:31

score 9 · Answer 2 · edited Aug 11 '16 at 04:57

9

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.

edited Aug 11 '16 at 04:57

Community

1
1

answered Mar 25 '12 at 09:30

gdoron

147,333
58
291
367

This doesn't really put the titles in workable form if he wants to do additional processing with javascript – maček Mar 25 '12 at 09:34
@macek. he wrote he wants to submit to values with ajax request. `serialize()` is the native solution. – gdoron Mar 25 '12 at 09:38

score 7 · Answer 3 · answered Nov 05 '19 at 06:34

7

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

answered Nov 05 '19 at 06:34

Shehroz Altaf

618
1
10
17

Wow, I'm still getting answers :) Thanks. I now use JS frameworks for things like this. – Serge Vinogradov Nov 06 '19 at 15:10
thanks, it's worked for me – Shibbir Ahmad Feb 03 '22 at 10:40
I haven´t tohught about that option, Thank you – Juan Joya Mar 28 '23 at 00:12

m90 · Answer 4 · 2012-03-25T09:44:58.530

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.

score 0 · Answer 5 · answered Mar 25 '12 at 09:31

0

Means:

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

or

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

?

answered Mar 25 '12 at 09:31

Snake Eyes

16,287
34
113
221

Get array of values from multiple inputs using jQuery

5 Answers5

Linked