How to access a hidden input with javascript

Question

What I am attempting to do is is access hidden object in a div. What happends is a user will click on button that will then perform some task such as delete a user. This may be easier if I show what I have.

<div class="mgLine">
    <input type="hidden" name="tenentID" value="1">
    <p class="mgName">James Gear</p>
    <input type="text" class="mgBill" value="" placeholder="Post Bill Link Here">
    <a href="#" class="mgButton" onclick="alertTest(this)">Submit Bill</a>
    <a href="#" class="mgNP">Not Paid</a>
    <a href="#" class="mgButton">Change Password</a>
    <a href="#" class="mgButton">Delete User</a>
</div>

What I want the system to do is alert the value of one which it gets from the hidden field when the "submit bill" is pressed.

function alertTest(e){
//e.parentNode
window.alert(e.parentNode.getElementsByTagName("tenentID")[0]);
}

I am attempting to use JavaScript DOM to access the element. I hope this made at least some sense. There will be many of these entries on the page.

use getElementsByName instead of getElementsByTagName

Givi
– Givi

2013-05-29 23:10:54 +00:00
Commented May 29, 2013 at 23:10 — Givi
– Givi, Commented May 29, 2013 at 23:10
Always the first child? If so, e.parentNode.children[0]

user1106925
– user1106925

2013-05-29 23:14:33 +00:00
Commented May 29, 2013 at 23:14 — user1106925
– user1106925, Commented May 29, 2013 at 23:14

PSL · Accepted Answer · 2013-05-30 00:27:27Z

6

You need to use getElementsByName instead of getElementsByTagName

function alertTest(e){
//e.parentNode
window.alert(document.getElementsByName("tenentID")[0]);
}

getElementsByTagName is for selecting elements based on its tag say div, input etc..

getElementsByName

getElementsByTagName

Realizing that you might have multiple div section and your hidden input is the first child you could use these:-

e.parentNode.getElementsByTagName("input")[0].value;

or

e.parentNode.firstElementChild.value;

if it is not the firstCHild and you know the position then you could use

e.parentNode.children(n).value; //n is zero indexed here

Fiddle

edited May 30, 2013 at 0:27

answered May 29, 2013 at 23:11

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

MuffinTheMan Over a year ago

When I was looking into this, I was getting the error: Object #<HTMLDivElement> has no method 'getElementsByName' (I was using code identical to yours). However, document.getElementsByName("tenentID")[0] worked.

Austin Lovell Over a year ago

This looks like it will work for what I am trying to do. Thank you so much for your help and everyone else's!

Explosion Pills · Accepted Answer · 2013-05-29 23:11:12Z

6

The modern method would be to use querySelector.

e.parentNode.querySelector("[name=tenentID]");

http://jsfiddle.net/ExplosionPIlls/zU2Gh/

However you could also do it with some more manual DOM parsing:

var nodes = e.parentNode.getElementsByTagName("input"), x;
for (x = 0; x < nodes.length; x++) {
    if (nodes[x].name === "tenentID") {
        console.log(nodes[x]);
    }
}

http://jsfiddle.net/ExplosionPIlls/zU2Gh/1/

answered May 29, 2013 at 23:11

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

Yotam Omer · Accepted Answer · 2013-05-29 23:10:52Z

0

Try this:

function alertTest(e){
    alert(e.parentNode.getElementsByName("tenentID")[0].value);
}

answered May 29, 2013 at 23:10

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

Comments

Les Ferguson · Accepted Answer · 2013-05-29 23:15:26Z

0

I usually set an id attribute on the hidden element, then use getElementById.

<input type="hidden" id="tenentID" name="tenentID" value="1">

then I can use...

var tenentValue = document.getElementById("tenentID").value;

answered May 29, 2013 at 23:15

Les Ferguson

3511 silver badge6 bronze badges

1 Comment

user1106925 Over a year ago

What if there are several of them? Seems that's likely the case here.

MBielski · Accepted Answer · 2013-05-29 23:16:36Z

0

In general, your best bet for accessing a specific element is to give it an ID and then use getElementById().

function alertTest(ID){
  alert(document.getElementById(ID).value);
}

Names can be duplicated on a page, but the ids have to be unique.

answered May 29, 2013 at 23:16

MBielski

6,6103 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to access a hidden input with javascript

5 Answers 5

getElementsByName

getElementsByTagName

Fiddle

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related