Get the values for all the input hidden in the html with jQuery

Question

I want to get a list with the values for all of the input hidden that I have in my HTML. All of these inputs hidden ids will end with the string LevelName. This is an example of the inputs (they don't have to appear one after another):

<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

I have tried this:

console.log($( this ).find("input:hidden[id$='LevelName']"));

And on the console I get:

[object Object]{0: HTMLInputElement {...}, 1: HTMLInputElement {...}, 2: HTMLInputElement {...}, context: HTMLDocument {...}, jquery: "2.1.1", length: 3, prevObject: Object {...}, selector: "input:hidde..."}

I have also tried:

console.log($( this ).find("input:hidden[id$='LevelName']").val());

But I get:

nivel_1

I think I'm on the right way but I don't know how to get all the values from the result of find.

How can I get all the values in one string separared by commas?

loop through the inputs

guradio
– guradio

2017-05-18 09:34:18 +00:00
Commented May 18, 2017 at 9:34 — guradio
– guradio, Commented May 18, 2017 at 9:34

guradio · Accepted Answer · 2017-05-18 09:36:11Z

1

var allvalues = $("input:hidden[id$='LevelName']").map(function() {
  return $(this).val()
}).get()
console.log(allvalues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

Loop all the inputs.
use .map() to get the input values and put it in array

answered May 18, 2017 at 9:36

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cнŝdk · Accepted Answer · 2017-05-18 09:42:02Z

Your problem is that you are not looping throught the collection of inputs, you are just returning the value of the first one.

You need to use $("input[id$='LevelName'][type='hidden']") to get all the hidden inputs and then use .each()method to loop over them to take their values:

Demo:

$("input[id$='LevelName'][type='hidden']").each(function() {
  console.log($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

Carsten Løvbo Andersen · Accepted Answer · 2017-05-18 09:35:07Z

0

You can simply loop through all elements and then get the value.

$("input:hidden[id$='LevelName']").each(function() {
  console.log($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

answered May 18, 2017 at 9:35

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Comments

prasanth · Accepted Answer · 2017-05-18 09:36:11Z

0

You need to loop the element .so Try with each()

$("input:hidden[id$='LevelName']").each(function(){
console.log($( this ).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

answered May 18, 2017 at 9:36

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2017-05-18 09:36:33Z

The issue is because when you call val() on a jQuery object holding a collection of elements it will only return the value of the first one in the set.

If you want to build a list of the values you can create an array of them using map(), like this:

var values = $("input:hidden[id$='LevelName']").map(function() {
  return this.value;
}).get();

console.log(values);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

Zaid Bin Khalid · Accepted Answer · 2017-05-18 09:38:51Z

0

Loop the input fields.

$("input").each(function() {
  console.log($(this).attr('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="VariableDataList_0__LevelName" name="VariableDataList[0].LevelName" type="hidden" value="nivel_1" />
<input id="VariableDataList_1__LevelName" name="VariableDataList[1].LevelName" type="hidden" value="nivel_2" />
<input id="VariableDataList_2__LevelName" name="VariableDataList[2].LevelName" type="hidden" value="nivel_3" />

answered May 18, 2017 at 9:38

Zaid Bin Khalid

7639 silver badges27 bronze badges

Collectives™ on Stack Overflow

Get the values for all the input hidden in the html with jQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related