use getAttribute to get row ID 1

bdc1 · Jun 13, 2005

I'm trying to capture the row ID of a table when a user makes a change to the value of a form element. The row id is set to the the unique ID from the database table.

(Eventually I want to append each row ID to the value of a hidden form field that will be processed server-side so that only the necessary rows are updated)

Here is the code I'm using:

Code:

<script type="text/javascript">

var idList;
function initalise(){ //called with onLoad of body
	idList = document.getElementById("txtList");
	idList.setAttribute('value',''); //set initial value to empty string
	}

function setListValues(){ // called with onChange of each form field
       idList.setAttribute('value', TR.getAttribute('id')); //error message points to this line
	}
</script>

I always get an error message saying TR is undefined, which I don't quite understand since I am trying reference a standard HTML element. But this is the first time I have tried using getAttribute, so I'm sure I'm missing something simple!

RTomes · Jun 13, 2005

You should have an element like: <tr id=TR> with an ID of "TR"
If you do try getElementById("TR");

BillyRayPreachersSon · Jun 14, 2005

I always get an error message saying TR is undefined, which I don't quite understand since I am trying reference a standard HTML element.

True - TR is a standard HTML element... but you are not using HTML, you are using JavaScript. TR is not anything in JavaScript, unless you define it.

You would need to get a pointer to the specific TR you wish to address... so seeing how you are calling your JS function would be a handy thing to know.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

adam0101 · Jun 14, 2005

Add the stuff in blue...

Code:

function setListValues(){
  [blue]TR = getContainer(idList,'tr');[/blue]
  idList.setAttribute('value', TR.getAttribute('id')); 
}

[blue]function getContainer(obj,tag){
  while(obj.parentNode!=null && obj.tagName && obj.tagName.toLowerCase()!=tag.toLowerCase()) obj = obj.parentNode;
  return obj;
}[/blue]

Adam

bdc1 · Jun 16, 2005

Still not getting this to work..

RTomes & BillyRayPreachersSon: The row id's are not static, but are set to the record id from database so they will be different each time the page is loaded.

The scenario is that this page could load with between 5 and 80 records. The user may update one or many records. I want a way for the page to "remember" the ids of the records that were edited (which is why I am calling this from the onChange event of a text field), so that when the data is passed to the database, only the records that were changed get updated.

I was hoping that if I set the row id = record id, I could capture that value whenever a change was made to a field in that row.

I know I could put a checkbox in each row and have its value set to to the record id when checked, but I'm trying to make all of this as simple for the user as possible (I've tried this method before and while it works, its been hard to get the users to remember to check this box for the records they want to update).

BillyRayPreachersSon · Jun 16, 2005

Why not use the form element to do the work for you? Most people don't know that every form element has a value and a default value. The value is the current value at any given time, and the default value is the value that the element contained when it was delivered to the page.

You would simply loop around all form elements, checking to see if their value was different from their default value, and voila.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

tsuji · Jun 17, 2005

A little demo of principle worth a thousad words. The intriguing part is the grandparent node of td input tag. You pass the changed td object to the onchange handler and retrieve its (grand)parent tr. (The alert is to show you what you get.)
[tt]
<html>
<head>
<script language="javascript">
var idList;
function initialise() {
idList=document.getElementById("txtList");
idList.setAttribute("value","");
}
function setListValues(obj) {
//alert(obj.id);
//alert(obj.parentNode.parentNode.id + "\n" + obj.parentNode.parentNode.tagName);
idList.setAttribute("value",obj.parentNode.parentNode.getAttribute("id"));
//alert(idList.value);
}
window.onload=initialise;
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>123</td><td>456</td><td>789</td>
</tr>
<tr>
<td>abc</td><td>def</td><td>ijk</td>
</tr>
<tr id="<%=w%>">
<td><input type="text" id="<%=x%>" onchange="setListValues(this)" /></td>
<td><input type="text" id="<%=y%>" onchange="setListValues(this)" /></td>
<td><input type="text" id="<%=z%>" onchange="setListValues(this)" /></td>
</tr>
</table>
<br /><br />

<input type="text" id="txtList" />
</form>
</body>
</html>
[/tt]
- tsuji

bdc1 · Jun 17, 2005

Tsuji,

That worked great with one modification so that I could get a comma delimited list of the ids:

idList.setAttribute("value",document.form1.txtList.value + ',' + obj.parentNode.parentNode.getAttribute("id"));

Thanks!

tsuji · Jun 17, 2005

In that case, to be consistent, simply do it like this.
[tt]
idList.setAttribute("value",[blue]idList.value[/blue] + ',' + obj.parentNode.parentNode.getAttribute("id"));
[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

use getAttribute to get row ID 1

bdc1

Technical User

RTomes

Programmer

BillyRayPreachersSon

Programmer

adam0101

Programmer

bdc1

Technical User

BillyRayPreachersSon

Programmer

tsuji

Technical User

bdc1

Technical User

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor