document.getElementById('id').value failing in ASP.net javascript function

Question

Hidden fields:

<input type="hidden" id="hidOrg1"  runat="server" value="" />
<input type="hidden" id="hidBT" runat="server" value="" />

javascript function:

function doGetWave(obj) {
    //debugger
    var brk = document.getElementById('hidBT').value;
    //var brkId = document.getElementById('hidBI').value;
    var org = document.getElementById('hidOrg1').value;
    session = obj.options[obj.selectedIndex].value;
    sWaveText = obj.options[obj.selectedIndex].text;    
    if (brk == "") {
        window.location.href = "url.aspx?multiple=" + org + "&wave=" + sWaveText + "&strORGId=multiple";
    }
    else {
        window.location.href = "url.aspx?multiple=" + org + "&wave=" + sWaveText + "&BRKType=" + brk + "&strORGId=multiple";
    }
}

codebehind:

protected void Page_Load(object sender, EventArgs e)
{
    hidOrg1.Value = strOrgId;
    hidBT.Value = "";
}

The javascript function errors out with "Object Expected" at the var brk = ... and I cannot figure out where it is going wrong. Pulling my hair out! :(

Answer 1

When you place runat="server" in an standard HTML tag, ASP.Net mangles the ID to ensure that it's unique (just like it does with its own controls). You need to access the element using the ID that ASP.Net assigned. Try this:

var brk = document.getElementById('<%= hidBT.ClientID %>').value;
var org = document.getElementById('<%= hidOrg1.ClientID %>').value;

Additional Information

If you're using the 4.0 framework, you can change this behavior at the element, page, or application level. Check out this link for a decent little tutorial. If you choose to set the ClientIdMode to Static, you can access your elements by the ID's that you originally assigned (they will not be changed).