How to get all values from inputs with same name but different index via Jquery

Question

I had a task and now this is kind weird and I don't know, how to do that. So, I have non-specific number of inputs, with same name car but different indexes, like sub, master and val.

It looks like this:

<input type='text' name='bike[master]' value='some predefined value 1'>
<input type='text' name='bike[sub]' value='some predefined value 2'>
<input type='text' name='bike[val]' value='some predefined value 2.1'>
<input type='text' name='bike[sub]' value='some predefined value 3'>
<input type='text' name='bike[val]' value='some predefined value 3.1'>

I need, that jQuery, after user click on input, take all these values from inputs to one variable, if it will be possible, and send to server, which will put these data together and work with them.

Any idea? It is little bit complicated with indexes for me.

If you use $("form").serialize() jQuery will do this automatically for you. — Barmar
– Barmar, Commented May 14, 2016 at 13:34

Nenad Vracar · Accepted Answer · 2016-05-14 13:58:13Z

You can take values of each input which name starts with bike on click and push it in one array

var result = [];
$('button').click(function() {
  $('input[name^="bike"]').each(function() {
    result.push($(this).val());
  })
  console.log(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' name='bike[master]' value='some predefined value 1'>
<input type='text' name='bike[sub]' value='some predefined value 2'>
<input type='text' name='bike[val]' value='some predefined value 2.1'>
<input type='text' name='bike[sub]' value='some predefined value 3'>
<input type='text' name='bike[val]' value='some predefined value 3.1'>
<button>Send</button>

You can also use JQuery serializeArray() function and return array, and then use that data

$('form').click(function() {
  var data = $(this).serializeArray();
  data.forEach((e) => {console.log(e.value)});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type='text' name='bike[master]' value='some predefined value 1'>
  <input type='text' name='bike[sub]' value='some predefined value 2'>
  <input type='text' name='bike[val]' value='some predefined value 2.1'>
  <input type='text' name='bike[sub]' value='some predefined value 3'>
  <input type='text' name='bike[val]' value='some predefined value 3.1'>
  <input type="submit" value="Send">
</form>

Jenson M John · Accepted Answer · 2016-05-14 13:16:02Z

2

You can use Attribute Starts With Selector

 $( "input[name^='bike']" );

See JSFiddle

edited May 14, 2016 at 13:16

answered May 14, 2016 at 13:08

Jenson M John

5,7295 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to get all values from inputs with same name but different index via Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related