CODEWITHSUNDEEP
javascripthtmldom
Nik Klep
Nik Klep

Reputation: 61

Javascript - How to get attribute value from a tag, inside a specific div class?

Snippet of HTML code I need to retrieve values from:

<div class="elgg-foot">
  <input type="hidden" value="41" name="guid">
  <input class="elgg-button elgg-button-submit" type="submit" value="Save">
</div>

I need to get the value 41, which is simple enough with:

var x = document.getElementsByTagName("input")[0];
var y = x.attributes[1].value;

However I need to make sure I'm actually retrieving values from inside "elgg-foot", because there are multiple div classes in the HTML code.

I can get the class like this:

var a = document.getElementsByClassName("elgg-foot")[0];

And then I tried to combine it in various ways with var x, but I don't really know the syntax/logic to do it. For example:

var full = a.getElementsByTagName("input")[0];

So: Retrieve value 41 from inside unique class elg-foot.

I spent hours googling for this, but couldn't find a solution (partly because I don't know exactly what to search for)

Edit: Thanks for the answers everyone, they all seem to work. I almost had it working myself, just forgot a [0] somewhere in my original code. Appreciate the JQuery as well, never used it before :-)

Upvotes: 3

Views: 6516

Answers (5)

Nelson Teixeira
Nelson Teixeira

Reputation: 6580

I think the simplest way would be using JQuery. But using only javascript, 

the simplest way would be:

var div = document.getElementsByClassName("elgg-foot")[0];
var input = div.getElementsByTagName("input")[0];
alert(input.value)

Take a look at this JSFiddle here: http://jsfiddle.net/2oa5evro/

Upvotes: 0

Ivan De Paz Centeno
Ivan De Paz Centeno

Reputation: 3785

You can combine it like this:

    var a = document.getElementsByClassName("elgg-foot")[0];
    var b = a.getElementsByTagName("input")[0];
    var attribute = b.attributes[1].value;
    console.log(attribute); // print 41

Think of the DOM as the tree that it is. You can get elements from elements in the same way you get from the root (the document).

Upvotes: 1

Travis J
Travis J

Reputation: 82297

query the dom by selector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

var fourty1 = document.querySelector('.elgg-foot input[name=guid]').value;

querySelector will return the first match from the selector. This selector will find the element with class elgg-foot and then look at the input element inside of that for one named guid and then take the value of the selected element.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

You can use querySelector like

var x = document.querySelector(".elgg-foot input");
var y = x.value;

Upvotes: 0

mcse3010
mcse3010

Reputation: 304

The easiest way is to use jQuery and use CSS selectors:

$(".elgg-foot") will indeed always get you an element with class "elgg-foot", but if you go one step further, you can use descendent selectors:

$(".elgg-foot input[name='guid']").val()

That ensures that you only get the input named guid that is a child of the element labelled with class elgg-foot.

The equivalent in modern browsers is the native querySelectorAll method:

document.querySelectorAll(".elgg-foot input[name='guid']")

or you can do what you have yourself:

var x = document.getElementsByClassName("elgg-foot")
var y = x.getElementsByTagName("input")[0];

Assuming you know it is always the first input within the div

Upvotes: 3

Related Questions