We Keep Coding

ASP.NET Button, OnClientClick not working

I have button with both OnClick and OnClientClick events declared.
There is some specific task that I wish to accomplish before the postback occurs but for some strange reason OnClientClick is never fired. I have used it numerous times before and never had this specific issue.
There is something wrong with it, I also tried with adding 'return false' directly to prevent server side processing but postback occurs nevertheless.
I checked whether my form is inside an UpdatePanel but it is not.
<cms:CMSButton ID="btnOk" OnClientClick="clientClick()" OnClick="btnOK_Click" runat="server" ButtonStyle="Default"
EnableViewState="false"></cms:CMSButton>
$(document).ready(function () {
function clientClick() {
console.log("Clicked");
document.getElementById("<%=spinner.ClientID %>").style.display = "block";
document.getElementById("<%= btnOk.ClientID%>").style.display = "none";
}
});
Also I tried firing the event in this manner, with no luck, so there may be something else going on here:
$('#<%=btnOk.ClientID%>').click(function () {
console.log('clicked');
});
Checked the console but could not find any js errors.

As others suggested - avoid document.Ready like the plague.
Now don't take this suggested rule as all or nothing. The simple matter is WHEN you need to use document.ready - then use it, but ALSO when you can avoid using it, don't just out of the blue use it to hook up event code - it REALLY hard to follow.
Now, you posted your markup - I don't know if you left parts out, but again WHEN code is not working, then you want to provide a wee bit more details.
your code should look like this:
<cms:CMSButton ID="btnOk" OnClientClick="clientClick()" OnClick="btnOK_Click"
runat="server" ButtonStyle="Default"
EnableViewState="false"></cms:CMSButton>
<script>
function clientClick() {
console.log("Clicked");
document.getElementById("<%=spinner.ClientID %>").style.display = "block";
document.getElementById("<%= btnOk.ClientID%>").style.display = "none";
}
</script>
So you have a function, you have a onclick, you have a js function wiht that name. Nice, simple code approach here. Be it code behind, or js code in the page? You write a function, and then specify that function. Keep this simple.
In fact, I often suggest that you put the RIGHT below the button so you don't have to go trouging around the page to go find that routine in the markup.

remove onClick attribute in code behind

a checkbox on my page has the onclick event to enable a button when it is checked, and disable it when it is not checked. sometimes I need the button to be disabled completely, but I don't want it to be invisible.
the checkbox looks like this:
<asp:CheckBox ID="cb_start" runat="server" onClick="cb_start_click()"/>
<script>
var cb = document.getElementById("ContentPlaceHolder1_cb_start");
var btn = document.getElementById("ContentPlaceHolder1_btn_start");
function cb_start_click(){
btn.disabled = !cb.checked;
}
</script>
In the code behind I tried this, but it did not work:
cb_start.Attributes.Remove("onClick");
if (somecase) cb_start.Attributes.Add("onClick", "cb_start_click()");

You don't have to remove the listener. You can place your if (somecase) in cb_start_click() callback function to avoid the button from getting enabled.

If you want remove the event, just type in cs file:
rodape.Attributes.Remove("onclick");
Example on page...
Before remove event (using developer tools):
After remove event (using developer tools):

How can I prevent link behavior on clicking an image inside an anchor element?

I have a code similar to this:
<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></a>
Now I want the href link to work as normal if you click on the text, but if you click on the image, it should do something else and not goto the link at all.
There is also a restriction, I cannot edit the link or its text, the only thing that I have total control over is the img tag and its called onclick function. So I have to prevent the link from going on from within that img tag.
Any help will be appreciated.

Just preventDefault on the click event when the target is an <img>
yourAnchor.addEventListener('click', function (e) {
if (e.target.tagName === 'IMG')
e.preventDefault();
});

Now I want the href link to work as normal if you click on the text, but if you click on the image, it should do something else and not goto the link at all.
The correct way to do that is to not put the img inside the link.
However, if you really want to do that, change your onclick to:
onclick='doEdit(event)'
...and in doEdit:
function doEdit(event) {
if (event.stopPropagation) {
event.stopPropagation(); // Standard
}
else {
event.cancelBubble = true; // Old IE
}
// ...your img logic...
}
That will prevent the click event from bubbling to the link. You need the test for stopPropagation because IE8 and earlier don't have it (or preventDefault), they use properties instead (cancelBubble = true for stopPropagation and returnValue = false for preventDefault). (We're probably stuck with IE8 at least another year, maybe more, despite XP end-of-life...)

Pass the event through to the doEvent method call, similar to this:
<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit(event)'></a>
Then you can call event.preventDefault() to cancel the event and do your own thing, similar to this:
function doEdit(event){
// your code here
event.preventDefault();
}
DEMO - Using the event object to cancel the event.

Im not quite sure what you mean but if you want the text to have a link and the image to have a onclick event
text
<a href='link.html'>goto link page</a>
image
<img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></img>

My initial thought is to simply remove the image tag from between the link tags.
<a href='link.html'>goto link page</a>
<img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'/>
Are there more restrictions that do not allow you to do something like this?

make <a> link not performing the default function

I have a <a href="someaddress"> link that also has a onclick function under a parent <div> with id of "mention". How can I make it so that by default, when user clicks the <a> link it will not redirect to the webpage but it will do the onclick function?
I want to still have href because in case if user's javascript doesn't work, at least they can still go to the link.

...or return false; on your javascript call.

insert e.preventDefault() into your onclick function if it already exists, e.g.
$("#mention a").click(function(e) {
e.preventDefault();
// whatever is not default
});

You could also use return false;.

onclick="return false;" is a way to make an <a> tag not actually do anything on click.
EDIT
i had onlick, obv. it was supposed to be onclick

Use event.preventDefault().
Here's an example: http://jsfiddle.net/FishBasketGordo/2R2Ud/.

js, how to pass a click event?

<a id="button-a">a</a>
<a id="button-b">b</a>
I want click button a, the button b will also accept a click event;
click button b, the button a will also execute a click event.
how to make that in js? thanks.

$('#button-a').click(function(e) {
// do stuff
if (this !== event.target) return; // avoid infinite loop
$('#button-b').click(e);
});
Though as Nick Craver said, this is almost certainly the wrong solution; you should rather explain what the problem is.

At any time, you can call document.getElementById('button-b').click() ~ like somewhere in the event that handles the a-click. (or the library appropriate call to get an elemeny by id, e.g $('#button-b').click())

This is pretty basic, once you've seen how it works. Check out the JSFiddle example.
<a id="button-a" onclick="document.getElementById('button-b').click();">[a]</a>
<a id="button-b" onclick="alert('something else');">[b]</a>
http://jsfiddle.net/3eZPu/