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" autoplete="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" autoplete="off" onkeypress="return OverridePostBackOnEnter(event, 'ImageButton3');" />

Then my Javascript bees:

    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.

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" autoplete="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" autoplete="off" onkeypress="return OverridePostBackOnEnter(event, 'ImageButton3');" />

Then my Javascript bees:

    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.

• javascript
• asp
• dom-events

4 Answers 4

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"
                  autoplete="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"
   autoplete="off"  
 onkeypress="return OverridePostBackOnEnter(event, '<%#ImageButton3.ClientID%>');" />

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

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" autoplete="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

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

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