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.

James Hill · Accepted Answer · 2011-11-22 17:16:23Z

2

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%>');" />

edited Nov 22, 2011 at 17:16

answered Nov 22, 2011 at 17:07

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Neil Hodges Over a year ago

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

James Hill Over a year ago

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

Neil Hodges Over a year ago

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

James Hill Over a year ago

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

Neil Hodges Over a year ago

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

James Johnson · Accepted Answer · 2011-11-22 17:17:11Z

1

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 %>');

edited Nov 22, 2011 at 17:17

answered Nov 22, 2011 at 17:08

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

6 Comments

Neil Hodges Over a year ago

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

Neil Hodges Over a year ago

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

James Johnson Over a year ago

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

Neil Hodges Over a year ago

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 Over a year ago

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

|

szeliga · Accepted Answer · 2011-11-22 17:18:49Z

it's hacky, but this would work....

<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, '<asp:Literal ID="otherControlsClientIDHolder" runat="server" />');" />

Then on the server side set the text property of the literal to the client id of the image button....

otherControlsClientIDHolder.Text = ImageButton3.ClientID;

And James Hill's answer above is better than mine. It is functionally the same thing, but his is cleaner. +1 to James Hill's answer

clamchoda · Accepted Answer · 2019-12-03 19:11:31Z

0

Another way would be to add the attribute server side on page load.

tbSearch.Attributes.Add("onkeypress", "return OverridePostBackOnEnter(event, '" + ImageButton3.ClientID + "');");

answered Dec 3, 2019 at 19:11

clamchoda

5,1213 gold badges45 silver badges83 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related