Tracing through indirect relationship between controls

[avroshk]

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>

[stbuchok]

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?

[avroshk]

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?

[stbuchok]

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. ;)