Tracing through indirect relationship between controls

Hi! So I have two "tabs" implemented using radio buttons as shown in the code (visibility is controled by CSS). There is one control in each tab contained in the div. I hope the code is clear enough.

Now, I am inside a javascript function where I have the control id (say "txtArea") and I need to find its parent tabid. Is there a way to trace the tabid (I mean the radio id) from the control id?

As I see it they don't have any direct or indirect relationship as per DOM structure but there is a link - the div id.

Let's see if this interests you :)

<input type="radio" id="tabGeneral" name="Tabs" value="tabGeneral" checked="" drive="divContentsGeneral,tabGeneral_selected,tabConstruction_unselected" />

<input type="radio" id="tabConstruction" name="Tabs" value="tabConstruction" drive="divContentsConstruction,tabConstruction_selected,tabGeneral_unselected" />

<!-- other controls -->

<!-- Tab1 contents -->
<div id="divContentsGeneral" style="DISPLAY: none">
    <table border="0">
        <tr>
            <td><input id="txtStreetNumber" name="txtStreetNumber" type="text" /></td>
        </tr>
    </table>
</div>

<!-- Tab2 contents -->
<div id="divContentsConstruction" style="DISPLAY: none">
    <table border="0">
        <tr>
            <td><input id="**txtArea**" name="txtArea" type="text" /></td>
        </tr>
    </table>
</div>

You could just add a custom attribute:

<input id="txtStreetNumber" name="txtStreetNumber" type="text" data-tab="tabGeneral" />

Now you have a relationship, what you do with that relationship is up to you.

example using jQuery:

$(function(){
    $('#txtStreetNumber').click(function(){
        var tabId = $(this).attr('data-tab');

        alert(tabId);

        alert($('#' + tabId).is('checked'));
    });
});

[AleMonteiro]

Are you using pure JavaScript or jQuery as well?

Hi Ale, I can't use jQuery. Have to depend on Javascript :) If there's no other way I will have to go to my codebehind and do some changes there but before I do that I want to make sure if it's possible in js 'coz it will save a lot of efforts.

Hi stbuchok, your approach definitely solves my problem but I am trying to avoid it because I have a lot of pages that implement tabs and this will mean a whole lot of manual changes in all the controls under tabs. So, I am trying to find a generic way to get the tabname in javascript. What do you think?

I was thinking if I can first trace the parent div from the control then find which tab contains the div in its "drive" attribute. Is it possible through DOM functions?

Why can you use JavaScript and not jQuery?

You should be able to use this as well (just a starting point, not a full solution).

var element = document.getElementById('textboxId');
var tabId = element.getAttribute('data-tab');
tab = document.getElementById(tabId);

basically, it'd probably look something like this (place code at bottom of page in script tags, just above </body>):

var textBox = document.getElementById('textBoxId');

textBox.click = function(){
    var tabId = this.getAttribute('data-tab');
    tab = document.getElementById(tabId);

    //now you do whatever you need to with tab
};

Please remember, not tested in any way shape or form. ;)