how to get 1 hidden field among several within div

Question

i have 3 hidden fields in 1 div. when I have reference to this div, how to get 1 of the hidden fields in this div.

Answer 1

var firstHidden = $("input[type='hidden']:first", ref);

:first pseudo-class and attribute selector

or

var firstHidden = $("input:hidden:first", ref);

:hidden pseudo-class (be careful, because :hidden finds also elements with style="display: none")

or

var firstHidden = $("input[type='hidden']", ref).eq(0);

.eq()

where 'ref' variable is a reference to the DIV element

Answer 2

Without any code it's hard to help but i'd say give the hidden field an ID and use:

var hdn = document.getElementById("id");

Or if you're using Jquery use:

var hdn = $("#id");

Answer 3

if it's like this:

<div id="somediv">
    <input type="hidden"/>
    <input type="hidden"/>
    <input type="hidden"/>
</div>

and you're using jquery, you can just write this:

$("#somediv > input[type='hidden']:eq(1)")

and it should return a reference to the 1st hidden field. if you want the 2nd, use "eq(2)" and so forth.

Answer 4

Assuming you have a DIV, like so:

<div id="mydiv">
    <input type="hidden">
    <input type="hidden">
    <input type="hidden">
</div>

You can use jQuery to do something like this to select all of them:

$('input:hidden','#mydiv');

With that selector, now you have all 3 hidden fields in a jQuery collection. You can pick and choose from there which one you want to use by using several methods:

$('input:hidden:first','#mydiv'); // get first one using first
$('input:hidden:last','#mydiv'); // get last one using last
$('input:hidden','#mydiv').eq(0); // get first one using eq
$('input:hidden','#mydiv').eq(1); // get second one using eq
$('input:hidden','#mydiv').eq(2); // get third one using eq
$('input:hidden:eq(0)','#mydiv'); // get first one using eq in selector

The options are:

• first - get the first matched element in the collection.
• last - get the last matched element in the collection.
• eq(N) - get the Nth matched element, 0 based.
• :eq(N) - get the Nth matched element, 0 based, inside the selector string.

I am personally a fan of option 3 as I don't like having too much crap in my selector.

One caveat of the above is that by using the :hidden selector we might match other input elements that are hidden (ie, not visible). If you expect that to happen, or even if you don't, you could do this:

$('input[type=hidden]', '#mydiv').eq(0);

Answer 5

I would assign a class to the hidden you want to find - a little easier on the programmer looking back on it in 4 years. I'm using "id" as an example of the hidden. Once you find it with jQuery - you can use .val() to get its value.

HTML:

<div id="mydiv">
  <input type='hidden' name='mydiv_id' class='idField' value='test1' />
  <input type='hidden' name='mydiv_hidden2' class='option2' value='test2' />
  <input type='hidden' name='mydiv_hidden3' class='option3' value='test3' />
</div>

jQuery:

//execute on document ready:
$(function() {
  var div = $('#mydiv'); //some jquery/dom element "div"

  // use the jQuery selector with "div" as our context.
  var $hidden = $('input.idField', div);

  alert($hidden.val()); // should alert 'test1'
});

Answer 6

This will also work (jQuery):

$('#my_div').find('input[type=hidden]:first')

Answer 7

For a reference, if you're not using jQuery like the original poster and assuming the structure above:

<div id="mydiv">
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</div>

var div = document.getElementById('mydiv');
var inputs = div.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
  // Match your input with inputs[i].name, etc.
}