Welcome to WebmasterWorld Guest from 54.145.44.134

Forum Moderators: open

Message Too Old, No Replies

getElementById Problems

Should I even be using it just to get the id value from a link?

     

Kahless

5:35 am on May 9, 2008 (gmt 0)

10+ Year Member



I am trying to get the value of "id" from an href to be used as an ajax function to query a mysql database. The php/mysql part worked for me fine and so did using javascript getElementById using a form and input boxes.

But I have allot of links so I thought a form with buttons as shown in all the basic tutorials for getElementById is not the best way to go and I should use straight links instead.

The one problem I have is in modifying some code I took from a tiztag tutorial and switching everything to links instead of input boxes, I get "object not found".

The problem seems to be with this line:

"var id=document.getElementById('id').value;" If I remove value the error goes away but "id" then returns a null value. So I thought "value" should remain to get the "id" value from the link. Is this not how I should be getting the value from an href id?


function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var id=document.getElementById('id').value;
var queryString = "?id=" + id;
ajaxRequest.open("GET", "/test.php" + queryString, true);
ajaxRequest.send(null);
}

//-->

<body>
<a href='#' id='3' onclick='ajaxFunction()'>Test</a>
</body>

thx

adni18

7:19 am on May 9, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Does linkobject.href not work?

rocknbil

3:52 pm on May 9, 2008 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First, I don't know if you can get a value from an anchor. It's not a form field, hence, no value attribute. As adni suggested,

var id=document.getElementById('id').href;

Second, where is the element you've applied the id "id" to?

You may be confusing the id attribute with an actual id value. For this to work,

var id=document.getElementById('id').href;

you have to do this

<a href='#' id='id' onclick='ajaxFunction()'>Test</a>

It may be less confusing if you don't apply an id value of "id":
var id=document.getElementById('some_link').href;

<a href='#' id='some_link' onclick='ajaxFunction();return false;'>Test</a>

Returning false from the function or adding it inline as shown will prevent the click from causing a navigation to the top of the page.

Kahless

4:53 pm on May 13, 2008 (gmt 0)

10+ Year Member



The purpose was for an article tree and what seems to work is using a form with styled input buttons to look like folders or documents.

It seems to work but I was not sure if this was the best way of doing something like this.

<input type='button' onclick='ajaxFunction()' value='Query MySQL' />

I would end up having a 100 or so of these buttons per page. Is that considered a bad practice or typical?

adni18

5:46 pm on May 17, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't really think it matters, as long as it serves the purpose it needs to.