Reputation: 46041
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?
Upvotes: 0
Views: 123
Reputation: 32175
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" />
Upvotes: 0
Reputation: 763
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" />
Upvotes: 0
Reputation: 337743
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" />
Upvotes: 0
Reputation: 22510
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" />
Upvotes: 0
Reputation: 15565
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" />
Upvotes: 1
Reputation: 27051
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" />
Upvotes: 0