Pass asp.net ClientId to Javascript Function - inline as a param

Question

I have a asp Image Button that needs to be clicked via a Javascript function. The keypress of a textbox should fire this image buttons server side event as well upon hitting the enter key. The code is as follows: -

Markup

    <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="images/butt_searchoff.png"
    class="sb_search" ToolTip="Search the Database" AlternateText="Search" OnClick="ImageButton3_Click" OnClientClick="SetExpandedCount()"/>

    <input id="tbSearch" runat="server" class="sb_input" type="text" autocomplete="off" onkeypress="return OverridePostBackOnEnter(event, '" & ImageButton3.ClientID & "');" />

I want to pass the ImageButton3 ClientId as a param to a Javascript function called OverridePostBackOnEnter.

The Javascript looks like this:

     function OverridePostBackOnEnter(event, ctrl) {
        if (event.keyCode == 13) {
            alert(ctrl);
            if ($.browser.mozilla) {
                __doPostBack(ctrl, 'OnClick'); //for IE
            }
            else {
                //but for other browsers you should use
                __doPostBack(ctrl, 'OnClick');
            }
        }
    };

What I'm finding is a) I can't get the correct ClientId to be passed, I just get either undefined or null.

and b) if I hard code and change the ctrl to 'cmain_ctl00_ImageButton3' the __dopostback is not invoking my server-side code for the ImageButton3.

Any help on this would be greatly appreciated.

Edit

Ok think I have found a solution for this and thought I should update the post in case anyone needs it.

Firstly I have set the 'ClientIdMode' on ImageButton3 to 'Static'

     <asp:ImageButton ID="ImageButton3" ClientIDMode="Static" runat="server" ImageUrl="images/butt_searchoff.png" class="sb_search" ToolTip="Search the Database" AlternateText="Search" OnClick="ImageButton3_Click" OnClientClick="SetExpandedCount()"/>

this allows me to pass the id of the button to the function 'OverridePostBackOnEnter'

    <input id="tbSearch" runat="server" class="sb_input" type="text" autocomplete="off" onkeypress="return OverridePostBackOnEnter(event, 'ImageButton3');" />

Then my Javascript becomes:

    function OverridePostBackOnEnter(event, ctrl) {
        if (event.keyCode == 13) {
            if ($.browser.mozilla) {
                var overridctrl = document.getElementById(ctrl);
                __doPostBack(overridctrl.name, ''); //for IE
            }
            else {
                //but for other browsers you should use
                var overridctrl = document.getElementById(ctrl);
                __doPostBack(overridectrl.name, '');
            }
        }
    };

By looking into 'yourForm._EVENTTARGET.value' and 'yourForm._EVENTARGUMENT.value' I could see those values were not being set. By using 'document.getelementId' and passing the 'control.name' sets those values and enables the '__dopostpack' to invoke the serverside event.

Solution 1

Use the this keyword instead. In the context of your input's onkeypress event, this will refer to the input object. Therefore, this.id will be sufficient. Example below:

<input id="tbSearch" runat="server"
                  class="sb_input" type="text"
                  autocomplete="off"  
                  onkeypress="return OverridePostBackOnEnter(event, this.id);" />

EDIT

Totally misread your post. Correct answer below:

<input id="tbSearch" runat="server"
   class="sb_input" type="text"
   autocomplete="off"  
 onkeypress="return OverridePostBackOnEnter(event, '<%#ImageButton3.ClientID%>');" />

Solution 2

Just use this.id:

OverridePostBackOnEnter(event, this.id); 

You could also change the method and just pass in the element itself:

OverridePostBackOnEnter(event, this); 

EDIT

To pass in the ClientID of the ImageButton, try something like this:

OverridePostBackOnEnter(event, '<%= ImageButton3.ClientID %>'); 

Comments

[Neil Hodges]

would that not pass the id of the input control? i need the clientid of the ImageButton control

[Neil Hodges]

would that not pass the id of the input control? i need the clientid of the ImageButton control

[James Hill]

You're correct. It appears that both @JamesJohnson and I misread your post.

[Neil Hodges]

Yep tried that one my alert shows the text <%= ImageButton3.ClientID %> not the clientid as you would expect.

[Neil Hodges]

Yep tried that one my alert shows the text <%= ImageButton3.ClientID %> not the clientid as you would expect.

[James Hill]

@NeilHodges, try <%# ImageButton3.ClientID %> instead.

[Neil Hodges]

hmm seem to get a javascript error with that one - Error: illegal XML character, dont think it likes the <%# part

[James Johnson]

I think html inputs have a tough time interpretting inline code. Can you use a TextBox control instead?

[Neil Hodges]

unfortunatley no, the code has already been written. The reason im doing this is further up the page im disabling all enter keypress on all input textboxs, then setting each input to override that by passing 2 params to a override function, this is generic, it accepts the clientid and the argument i.e. onclick, which inturn uses the __dopostback to invoke the serverside event.

[James Hill]

@NeilHodges, if I provided a code-behind solution, would you be able to use that?

[Neil Hodges]

unfortunatley no again, i was hoping to get away with it being a javascript function, thus just passing the id and the event of the control i want to invoke a postback on to the function and let the __dopostback handle the server side event. That way i can use that generic function anywhere in the site, on any control by just passing 2 params to that function.