CODEWITHSUNDEEP
javascripthtmldom
Austin Lovell
Austin Lovell

Reputation: 1049

How to access a hidden input with javascript

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.

Upvotes: 4

Views: 23107

Answers (5)

PSL
PSL

Reputation: 123749

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

Upvotes: 6

MBielski
MBielski

Reputation: 6620

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.

Upvotes: 0

Les Ferguson
Les Ferguson

Reputation: 351

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;

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191829

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/

Upvotes: 6

Yotam Omer
Yotam Omer

Reputation: 15376

Try this:

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

Upvotes: 0

Related Questions