javascript jquery find multiple hidden input without specific attribute

Question

Can javascript or jquery create an array of values from multiple hidden inputs with randomly created ids (in other words, no specific attribute to search for)? The code below only results in the alert of the first hidden input, 'abc'...
Thanks

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

<script>
//create hidden fields array
var hiddenFields = [];

//for each table row
$('html').each(function()
{
  //get hidden field 
  if (hiddenField != $(this).find("input[type='hidden']").val()){
  var hiddenField = $(this).find("input[type='hidden']").val();
  }
  //if not empty push to array
  if(hiddenField!='undefined'&& hiddenField !=null )
    hiddenFields.push(hiddenField);
});
alert(hiddenFields);
</script>

You can't have multiple elements with the same ID or you'll only return the first one. And where is your body? — Jonathan Rys
– Jonathan Rys, Commented May 23, 2018 at 0:08

Ibrahim Tareq · Accepted Answer · 2018-05-23 00:15:07Z

2

Maybe try this:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

JS

var tags = document.getElementsByTagName("input");

for(var i = 0; i < tags.length; i++){
  if(tags[i].getAttribute("hidden") == null){
    console.log(tags[i].value);
  }
}

Codepen - https://codepen.io/anon/pen/jxRVMb?editors=1010

answered May 23, 2018 at 0:15

Ibrahim Tareq

3562 silver badges13 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-05-23 00:13:28Z

1

You're only calling .val once after you .find, so it only returns the value of the first element in the jQuery collection. ($('html').each will only iterate once, because there's only one html tag in the document)

You can try something like this instead, no jQuery needed:

const hiddenFields = [...document.querySelectorAll('input[type="hidden"]')]
  .map(input => input.value);
  
console.log(hiddenFields);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

You should also try to fix the HTML so that there are no duplicated IDs; that's invalid.

If you wanted to use jQuery iteration:

const hiddenFields = $.map($('input[type="hidden"]'), input => $(input).val());
console.log(hiddenFields);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

edited May 23, 2018 at 0:13

answered May 23, 2018 at 0:08

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

ehaze27 Over a year ago

Thanks 4 quick response and using both! Yea, was just trying to simplify the question visually..the id obviously shouldn't be the same.

charlietfl · Accepted Answer · 2018-05-23 00:08:31Z

0

Can use a combination of filter() and map()

var results = $("input[type='hidden']").filter(function() {
  return this.value // only return elements that have value
}).map(function() {
  return this.value // pass the value to array
}).get()

console.log(results)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

answered May 23, 2018 at 0:08

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

ehaze27 Over a year ago

This worked too, thanks! I up-voted as well, but since I'm new user, will show up later when i have some activity.

random · Accepted Answer · 2019-02-06 08:46:12Z

0

Grab all hidden inputs and then you can fetch value by iterating on it using forEach loop

const hiddenInputs = document.querySelectorAll('input[type="hidden"]');

const hiddenInputValues = [];

hiddenInputs.forEach((ele) => {
    hiddenInputValues.push(ele.value);
});

console.log(hiddenInputValues);

<input type="hidden" id="some_random_id" value="abc" />
<input type="hidden" id="some_random_id" value="def" />
<input type="hidden" id="some_random_id" value="ghi" />

answered Feb 6, 2019 at 8:46

random

7,9093 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript jquery find multiple hidden input without specific attribute

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related