I have a javascript file that Select a button using jQuery and check it for validation.the code is:

$(document).ready(function () {
$('#<%= btn_Insert.ClientID %>').on("click", function (event) {

    if (Validate() != true) {
        event.preventDefault();
    }
});
function Validate() {
    return (1 == 1);
});

but I can' get ClientID for button and I get this Error:

Object doesn't support this property or method

where is my mistake?How I can get Client ID for a server side Button?

thanks

EDIT 1)

When I add script in head part of page it works but when I write it to a JS file and add reference to it in head part it does not work

I have a javascript file that Select a button using jQuery and check it for validation.the code is:

$(document).ready(function () {
$('#<%= btn_Insert.ClientID %>').on("click", function (event) {

    if (Validate() != true) {
        event.preventDefault();
    }
});
function Validate() {
    return (1 == 1);
});

but I can' get ClientID for button and I get this Error:

Object doesn't support this property or method

where is my mistake?How I can get Client ID for a server side Button?

thanks

EDIT 1)

When I add script in head part of page it works but when I write it to a JS file and add reference to it in head part it does not work

• javascript
• jquery
• asp

• does it have runat="server" defined on it? – Russ Cam Commented Nov 16, 2011 at 12:59

3 Answers 3

I suspect that the error es from the fact that event has a special meaning in some browsers. Try renaming the variable:

function Validate() {
    return (1 === 1);
}

$(function () {
    $('#<%= btn_Insert.ClientID %>').on('click', function (evt) {
        if (!Validate()) {
            evt.preventDefault();
        }
    });
});

or even easier :

$('#<%= btn_Insert.ClientID %>').on('click', function() {
    return Validate();
});

UPDATE:

Now that you have edited your question it is clear where the problem is. You are trying to use server side tags (<%= %>) in a separate javascript file. That's impossible. They will render literally and will not be processed by ASP.NET.

In order to solve your issue you could apply a CSS class to the button and then use a class selector:

$('.someClass').on('click', function() {
    ...
});

Another possibility is to use the ends with selector:

$('[id$="btn_Insert"]').on('click', function() {
    ...
});

http://jagregory./writings/how-to-use-clientids-in-javascript-without-the-ugliness/

Just add ClientIDMode="Static" to your server button control and use its ID in js w/o problems:

$('btn_Insert').on('click', function() {
    return Validate();
});