CODEWITHSUNDEEP
javascriptjquery
Serge Vinogradov
Serge Vinogradov

Reputation: 730

Get array of values from multiple inputs using jQuery

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?

Upvotes: 15

Views: 85451

Answers (5)

Shahroz Khan
Shahroz Khan

Reputation: 638

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

Upvotes: 7

gdoron
gdoron

Reputation: 150253

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.

Upvotes: 9

maček
maček

Reputation: 77778

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

Upvotes: 37

m90
m90

Reputation: 11822

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.

Upvotes: 1

Snake Eyes
Snake Eyes

Reputation: 16764

Means:

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

or 

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

?

Upvotes: 0

Related Questions