Getting Hidden Information From An Element? Extracting a value from something inside an element.

rob86 · August 25, 2009

I'll try to explain what I'm trying to do here as simple of an example as I can think of.

Let's say I have a link.

<a href="http://forums.xisto.com/; </a>

I want to add a hidden value to the <a> element such as a review rating between 1-100, that the user won't see on the webpage, but will be available to my code if needed.

I want to be able to extract that value from the element and use it in say, a javascript code.

How would I do this? It seems like it must be in the realm of the DOM or XML which I haven't read about much yet.

This is what it'd look like it my brain, but most likely isn't proper code:

<a href="http://trap17.com; WebsiteRating="93"> </a>

..and then, I'd be able to extract that value using a function.

<a id="website17" href="http://trap17.com; WebsiteRating="93" onmouseover="ShowInfo()"> </a>

And I'd have a javascript showinfo() function that could extract that websiterating.

ShowInfo() {alert(The rating for this website is _Website17'sWebsiteRatingAttribute);}

Assume of course that I couldn't just pass the 93 through the ShowInfo as a parameter because in reality this is just an example question not how I'm actually applying it. My question is how to get info from an element, not how to make a javascript popup.

Thanks!

galexcd · August 25, 2009

I'd recommend looking into Name spaces. It's not exactly what you're looking for but it may certainly help. Unfortunately, I'm not terribly familiar with how to properly implement them. I'm going to research this a bit and report back if I have any suggestions for you.

rob86 · August 25, 2009

XML Name spaces might work, but it seems kind of like the wrong thing or overkill but I'm not really sure. What I actually have is a bunch of <div> boxes with stuff in them. When someone mouses over that <div> area, I want a tooltip to show up with more detailed information. The problem is the tool tip would have to be relevant to the particular box ie: "The rating for the thing (the divbox) under your mouse cursor is ~93/100~", it can't be something that doesn't change like 'Hello World!".

I'm sure there are different ways to do this, but for this particular thing I don't think I'd need to connect to a mysql database or something just to read the number 93 since it's so tiny, so I thought there must be some simple way to write it into the html and then javascript could extract that value to make a tooltip.

Here's what I'm working on ---

http://forums.xisto.com/no_longer_exists/

That's just my web server on this computer, it's safe even though it looks suspicious without a domain name.

The page currently just pops up something with a javascript alert box, which isn't what I want I was just experimenting.

A quick look at the HTML Dom lessons makes me think there's something there that could do the job. I'm not familiar with the HTML DOM so I don't know.. looks like I'll have to read about it.

Edited August 25, 2009 by rob86 (see edit history)

truefusion · August 26, 2009

So you want to obtain the value of the attribute of a specific element? Here, this should do what you want; just analyze everything yourself to understand.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;<html xmlns="http://www.w3.org/1999/xhtml/ ; xml:lang="en" lang="en"><head><title>untitled</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><script type="text/javascript">function getValue(id, attr){ id = document.getElementById(id); for (var i = 0; i < id.attributes.length; i++) { if (id.attributes[i].nodeName.toLowerCase() == attr) return id.attributes[i].nodeValue; }}function setText(id, text){ id = document.getElementById(id); id.value = text;}</script></head><body><input id="hiddenElement" type="hidden" value="The value you want."/><input id="valueHolder" type="text"/><button onclick="setText('valueHolder', getValue('hiddenElement', 'value'))">Test</button></body></html>

If after attempting to understand what's going on you don't understand, then i'll try to provide an explanation later on. But this code should be simple enough to understand.

rob86 · August 26, 2009

That works and I understand it, thanks. I think I found another way to do it as well, what do you think of this? It looks shorter and seems to work.

<html><head><title>unknown</title></head><body><div id="TestID" hiddenValue="This is a hidden message."><script type="text/javascript"></script><input size="50" id="valueHolder" type="text"/><button onclick="valueHolder.value=document.getElementById('TestID').getAttribute('hiddenValue')">Click Me</button></body></html>

truefusion · August 26, 2009

That works and I understand it, thanks. I think I found another way to do it as well, what do you think of this? It looks shorter and seems to work.

Hmm, i should do more research on JavaScript and its objects—i tend to use JQuery for traversing the DOM. And, yeah, that is shorter, but if you want it to be (more) portable, you should consider functions instead of placing them all within the element's attribute like that.

jamjamnorman · August 27, 2009

I would use PHP for some thing like that. But saying that, I am probably the last person you'd want to ask about web programming though, i prefer applications.

minimcmonkey · August 29, 2009

There isnt really an attribute for that. I would reccoment using a hiddent form field with the information. This would be easy, and you would just need some javascript to read from the field.
Or you could use javascript arrays. For instance use three arrays

first array: HREF values
second array: user ratings
third array: link label

However, making javascript generate links will make it non search crawler friendly, as a web bot will not read javascript.

A better way would be to use PHP to output the links, as well as an onover attribute for an event and a variable.
Outline of how this would work:

PHP outputs links from MySQL database, a link to Xisto for instance could look like this:

<a href="http://trap17.com; onmouseover="userrating(http://forums.xisto.com/;

the script would work like this:
An array of URLs and an array of user ratings output by PHP from MySQL
The function reads the variable from the function and find it in the array, then find the user rating in the other array, then outputs it in a popup box or however you want to display it.

Hope this helps

Sign In

Getting Hidden Information From An Element? Extracting a value from something inside an element.

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information