Getting an element's parent node's ID

[HaLo2FrEeEk]

I have something set up like this:

 

<td id="email_entry" width="50%" align="center" style="border-bottom:1px solid black;"><input type="text" name="email" id="email" size="35" onchange="unhighlight(this.parentNode)"></td>

 

And I'd like to grab the input field's parent's ID, the table data tag, whose ID is email_entry.  I don't want to have to manually put in the elementId of each item I'm going to put this code in.  It's part of a validation process, when the submit button is clicked there is a javascript validation on the required fields.  All the fields that don't validate turn orange.  I want that orange to fade when the person fills something in, even if it's not the valid input for that field, it'll just be validated again when they click submit again.  I'll be doing server-side validation too, but this is just an extra measure.

 

Can anyone tell me how to get the parent node's ID for an element?  Like in the example above, what Javascript would I use?  I've tried this.parentNode, this.parentNode.className, I don't know what else to try, but google is failing me.

[Ken2k7]

this.parentNode.id

[Psycho]

The answer to your question is simple [object].parentNode.id

onchange="unhighlight(this.parentNode.id)"

 

But, I would suggest you just pass the object (i.e. 'this') in the function call and then determine the parent ID in the function:

onchange="unhighlight(this)"

 

 

[HaLo2FrEeEk]

Will that work if the Javascript is located in a separate file?  It's called up in the hader from a .js file.  It should work, though, I have something similar to that...I'll try it, thanks!

 

Edit: Worked great, thanks!  Now I have anothr question, say my HTML is like this:

 

<tr>
<td id="email_ex" width="50%" valign="top" style="border-bottom:1px solid black;">Email address (so I can keep you updated on the status of your request and contact you when it's done.)</td>
<td id="email_entry" width="50%" align="center" style="border-bottom:1px solid black;"><input type="text" name="email" id="email" size="35" onchange="unhighlight(this, 't')"></td>
</tr>

 

And I need to apply unhighlight to both the parent of the input box, and the other table data node...would I use previousSibling?  I'm not quite sure how that works...I suppose I could just try it...  I've added another variable into my function called "sib".  If I want to fade both the box with the element and the previous box in the table row, then I set it to "t" and it'll automatically do both.

[HaLo2FrEeEk]

Nevermind, this seems to only work in Internet Explorer, I tried it in Firefox and it only unhighlighted the main parent node, not the previous sibling.  In IE7 the previous sibling gets unhighlighted no problem...any ideas for a way around?

 

I don't want to have a lot of code to differentiate between different browsers, I'd just like a universal solution that will work in both browsers.