We Keep Coding

Stop onclick after onclientclick

I've seen a few examples on how to do this but they don't seem to be working for me. Having said that, I am doing it a little differently than the examples I've seen so I'm not sure if what I'm trying to do is possible.
I have a multiline asp texbox and onclientclick I want to make sure (among other things) the user hasn't gone over on max length before I submit the onclick event. However, this textbox is part of a user control that will be used X number of times on the page so I can't just grab the control from the Javascript. I have to send the clientID from the code behind. So I'm adding the OnClientClick event on the codebehind and pass the clientID for the control there. I wonder if that's why I'm getting the results I'm getting.
SaveNoteButton.OnClientClick = string.Format("return BeforeSave('{0}');", NoteTextBox.ClientID);
<asp:Button runat="server" CssClass="casenotes-bluebuttons" ID="SaveNoteButton" Text="Save" OnClick="SaveNoteButton_Click" Enabled="false" />
function BeforeSave(noteCtrl) {
var txt = document.getElementById(noteCtrl);
if (txt.value.length > 500) {
alert("false");
return false;
}
else {
alert("true");
return true;
}
}
So in theory, the OnClientClick property is added to the SaveNoteButton button. When it's fired, it passes the NoteTextBox.ClientID, the js checks the textbox length, returns true or false then the OnClick event fires depending on the return value. But it doesn't. I even tried wrapping the method call in an alert and the method is in fact returning what I expect but the OnClick event isn't firing regardless of the method's return value. I even tried removing the method call and hardcoding true and it still doesn't fire. So I know the return value is true and yet no OnClick love.

Oddly enough, it was syntax on the call to the js method.
SaveNoteButton.OnClientClick = string.Format("return BeforeSave('{0}');", NoteTextBox.ClientID);
becomes
SaveNoteButton.OnClientClick = string.Format("BeforeSave('{0}')", NoteTextBox.ClientID);
and it works just fine.

Remove the Enabled="false" bit. This is why the onclick event does not fire.

Alright, this is what I did to solve the problem:
SaveNoteButton.OnClientClick = string.Format("if(!BeforeSave('{0}', '{1}')) return false;", NoteTextBox.ClientID, this._maxLength);

Allowing the Javascript Onbeforeunload Function on the specific button on ASP.NET Framework

How to set the Onbeforeunload Function on the specific button?
Example, I have 3 buttons.
<div>
<asp:Button ID="btnBack" runat="server" Text="Back" CssClass="po-font" Height="30px"/>
<asp:Button ID="btnSumbit" runat="server" Text="Submit" CssClass="po-font" Height="30px"/>
<asp:Button ID="btnSaveToDraft" runat="server" Text="Save To Draft" CssClass="po-font" Height="30px"/>
</div>
On javascript, I did something like:
<script type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "Are you sure you want to leave this page? Any unsaved progress will be lost";
}
</script>
The function will work properly though but I want to specify the function in an specific button probably on the "Back" button. I did something like.
<script type="text/javascript">
function confirmExit()
{
return "Are you sure you want to leave this page? Any unsaved progress will be lost";
}
$('#btnBack').live('click', function () {
window.onbeforeunload = confirmExit;
});
</script>
but Id doesn't work. How to do this? Any Ideas? I just want to trigger the function on the specified button. Help me.

Use $('<%=btnBack.ClientID%>').click(function(){...}); because asp.net prefix its own client with the control id and html rendered id may look like ct100$btnBack.

First off its unlikely that the ID is correct as ASP.NET prefixes the ID with the containers if that object. Either give btnBack a class and use that or:
$("[id$='btnBack']").on("click",...)
I'll edit with a battle tested version when I'm back in front of my pc
* Edit to add battle tested code *
So you need to bind the unload event to the window, you can't assign a function to it as Kevin says in his answer. If you only want it to fire for a specific button, the code below is something I use in active production (it has a few more checks, and checks if anything has been changed on a page before firing etc...), so should work for you:
if (self == top) { // Check we're not in an iFrame or colorbox
$(window).bind("beforeunload", function (event) { // bind the window unload event
if (backLinkClicked) { // Check if the back link has been clicked, if so prompt
return "Are you sure you want to leave this page? Any unsaved progress will be lost";
};
});
}
Then your click handler:
var backLinkClicked = false;
$("[id$='btnBack']").click(function() { backLinkClicked = true });
So you back button click handler just changes the variable to fire the prompt on unload.

First off, you should understand that onbeforeunload is an event, and by putting:
window.onbeforeunload = confirmExit;
you are attaching an event handler to window, which will be global.
If I am correct, what you want is bringing up a confirmation dialog when user tries to navigate away by clicking on a button. I suggest you try this:
$('#<%=btnBack.ClientID%>').on('click', function (e) {
// check if user clicked cancel
if (!confirm("Are you sure [...]") {
e.stopImmediatePropagation();
e.preventDefault();
return false;
}
});
With this, when user clicks the button, a confirmation dialog will appear (confirm()). If user clicks cancel, code will call stopImmediatePropagation() (which should prevent other JS event handler from running) and preventDefault() (which disable the default action when the button is clicked, e.g., submitting the form).
I haven't tested this out myself, but I guess it should work.

Prevent LinkButton post back OnClientClick not working. Why?

I know there are plenty of answers surrounding this topic but I just cannot get this to work.
I need to prevent a link button posting back and the following code is not working. The code is definitely being hit in all the required places.
Link button definition:
<asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>
Javascript function (definitely being hit)
function showConfirm(event) {
event.stopPropagation();
return false;
}
However after showConfirm returns false the link button still posts back to the server side NavHelp method.
As a side note, I also put a breakpoint in the __doPostback method generated by .NET and it does get hit after showConfirm returns false.
Can anyone shed any light on this?

Right, figured it out. I needed to include the return statement in the OnClientClick attribute:
OnClientClick="return showConfirm(event);"
NOT
OnClientClick="showConfirm(event);"

incidentally, you can use your original code, but rather than using event.stopPropagation() you can use event.preventDefault()
so your code would be
<asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>
function showConfirm(event) {
event.preventDefault();
return false;
}
read some more on event.preventDefault() vs event.stopPropagation()
here : http://davidwalsh.name/javascript-events
basically the preventDefault prevents the elemnt from carrying out its dfault action, i.e. visting a link or submitting a form, while stoppropagation allows the dfault action to occur, BUT doesn't inform any parent elements that it has happened.
i created a little jsfiddle : http://jsfiddle.net/XgSXr/ that shows you the prevent default, this should allow you to put in your own javascript logic, display modals etc, before successfully pushing through the link click.

This works:
<asp:LinkButton ID="NavHelp" ClientIDMode="Static" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>
<script>
$("#NavHelp").click(function(event) {
if (showConfirm()) {
event.stopPropagation();
event.preventDefault();
return false;
}
return true;
});
</script>

Add Return statement in onClientClick Javascript Event
OnClientClick="return showConfirm(event);"
So when showConfirm return false then request will not be transer to server and page not postback.

How to prevent ASP:Button from posting back from a jQuery click handler

I have an ASP:Button on a page. It renders as HTML like so:
<input type="submit" name="myButton" value="Do something"
onclick="javascript:WebForm_DoPostBackWithOptions(
new WebForm_PostBackOptions('myButton', '', true, '', '', false, false))"
id="myButton" />
Now I am trying to prevent the default behavior of this button (submitting the form) via a jQuery event handler:
$('#myButton').click(function () {
// do some client-side stuff
if (someCondition) {
// don't postback!
return false;
}
});
The problem here is that the inline click handler that ASP sticks on the input seems to be executing before the jQuery event handler, every time.
The easiest solution here would be to use a plain input type="button" instead of an ASP:Button, unfortunately this is not a possibilty as this ASP:Button does many other things that are required in this scenario.
What would be the best way to prevent the form submission from happening? I've thought of using string manipulation to prepend my handler on the element's onclick attribute, but this seems really dirty. I'd also like to avoid using the OnClientClick as this would require my handler function to be publicly exposed. Is there a better way?

Have you tried adding OnClientClick="return false;" attribute to your aspx button control?
No worries check out this post it provides a javascript event unloader script: Is it possible to remove all event handlers of a given element in javascript?
I think youre interested in the last method DomLib.prototype.removeEventsByTypeEx

I just found a way
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var ploopButton = null;
$("#ploop").click(function (e) {
ploopButton = this;
});
$("#form1").submit(function (e) {
if (ploopButton !== null) {
ploopButton = null;
return confirm('are u sure?');
}
return true;
});
});
</script>
<form id="form1" runat="server">
<asp:Button ID="ploop" Text="ploop" runat="server" OnClick="ploop_Click" />
</form>
Basically you would use a global flag indicating which button was clicked, and you would confirm the form submit when the flag is turned on

OnClick/OnClientClick event with Asp.Net

I am a little confused to use this script and how it actually works?
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=TextBox1.ClientID%>').change(function () {
$('#various3').attr('href', $(this).val());
});
$("#<%=Button1.ClientID%>").click(function (event) {
setTimeout(showStickySuccessToast, 1000);
function showStickySuccessToast() {
$().toastmessage('showToast', {
text: 'Finished taking Screenshot!',
sticky: false,
position: 'middle-center',
type: 'success',
closeText: '',
close: function () {
}
});
}
})
});
</script>
This is my button:
<a id="various3" href="#"><asp:Button ID="Button1" runat="server"
Text="Button" OnClientClick="Button1_Click"/></a>
This is my code behind for button1_Click event:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim NewTh As New Threading.Thread(AddressOf DoIT)
NewTh.SetApartmentState(Threading.ApartmentState.STA)
NewTh.Start()
ImgPreview.ImageUrl = "~/uploads/Sample.jpg"
End Sub
Now if I click the button it should open the iframe and display the message which I am able to do.
Now the problem is how do I call the button1_Click event which is in the codebehind at the same time.
I have used OnClick and OnClientClick event as shown below but it's not working and I'm not getting any errors.

It looks like you've got things backwards:
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
The above example assumes that Button1_Click is the code-behind click event handler. Since you're assigning the client click event in jQuery, you shouldn't need to use OnClientClick at all.
EDIT
I would check to make sure that validation isn't intefering with the click. You can test this by setting CausesValidation="false" on the Button.

Onclick = raises a postback, executing the server eventhandler.
OnClientClick = raises a client click event and you can call a javascript function but you cant handlé an asp event directly although after calling a javascript function a postback occurs.