Passing a .net button control Id to a javascript function

Question

I am trying to pass an asp.net button control's id to a javascript function. When I call the js function start_time, the text of the button needs to change. I have done a lot of research and Im still not able to get it to work. Any help or advice is much appreciated. Below is the code I have.

<asp:Button ID="btnStart" runat="server" Text="OK" />

            $("#btnStart").click(function () {
            start_time("btnStart");
        });

            function start_time(controlStart) {
            var a = document.getElementById(controlStart);
            a.innerHTML = "Start";
        }

This should help.. http://stackoverflow.com/a/19860904/489512 — Venkata Krishna, Nov 08 '13 at 16:55
asp.net server control's ID will change when rendered because of `runat="server"`. So can't use `$("#btnStart")`.. — Venkata Krishna, Nov 08 '13 at 16:56

score 1 · Answer 1 · answered Nov 08 '13 at 16:56

<asp:Button ID="btnStart" ClientIDMode="Static" runat="server" Text="OK" />

$("#btnStart").click(function () {
    start_time("btnStart");
});

function start_time(controlStart) {
    var a = document.getElementById(controlStart);
    a.innerHTML = "Start";
}

If you set ClientIDMode1 to static, it should work. http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx

score 0 · Answer 2 · answered Nov 08 '13 at 16:55

0

The easiest way I've found to select ASP.net controls at the client is like this...

$("[ID$=btnStart]").click(function() {
    start_time(this);
});

In this code you pass the button into the function start_time, so you don't need to search the DOM for it...

function start_time(control) {
    control.innerHTML = "Start";
}

Due to the prefixing of IDs that ASP.net does to controls, the ID can change from page to page, in different contexts. That selector basically selects every element whose ID ends with btnStart.

There are other ways, using ClientID for example, but that can mean mixing ASP with JS files, depending on where your script is actually running.

If this script is running directly on the page, rather than from an included js file then you can do the following...

$("#<%= btnStart.ClientID %>").click(function() {
    start_time(this);
});

That will select the button by the ID it is given when the page is parsed on the server.

answered Nov 08 '13 at 16:55

Reinstate Monica Cellio

25,975
6
51
67

I'd be very interested to know why this was down-voted, since it's correct. – Reinstate Monica Cellio Nov 08 '13 at 17:47
Thanks @RayCheng. There's been a bit of that going on recently :) – Reinstate Monica Cellio Nov 08 '13 at 18:37
I've tried all the above solutions and I still cant get it to work. Strange! – user1288906 Nov 08 '13 at 19:20
Are you putting the javascript inside a jQuery document.ready handler? – Reinstate Monica Cellio Nov 09 '13 at 11:48

score 0 · Answer 3 · answered Nov 09 '13 at 06:24

0

@Archer answer is almost correct but you should use ClientID like this..!!

 $('#' + '<%= btnStart.ClientID %>').click(function() {
start_time(this);
});

answered Nov 09 '13 at 06:24

Sajad Karuthedath

14,987
4
32
49

This should be a comment, not asnwer. – user35443 Nov 09 '13 at 18:29
i didnt find any add comment link..!! So I had posted it as answer..!! I am only able to comment under this answer..!! I don't know why ?? – Sajad Karuthedath Nov 09 '13 at 18:40
Also, this will be slightly different from my answer, in output, but will have exactly the same effect. Re-check my code :) – Reinstate Monica Cellio Nov 11 '13 at 09:36

Passing a .net button control Id to a javascript function

3 Answers3