Tuesday, January 22, 2008

asp:Button and Javascript

It is useful many times to decide the behavior of a button based on some client side code result. For example, when a button is pressed a web page might need to execute Javascript code to validate some user input or to have the user confirm a certain action and based on the output of the client code either post back to the web server or ignore the click or execute more client side code.

Let's take the scenario of asking the user to confirm a certain action as this scenario has actually come up with me at a client. The web page has a button that deletes an object permanently. Upon a user click on the button, the page executes Javascript code to open a confirmation box with an OK and a Cancel button. The confirmation box should at the least minimize accidental deletions. If the user clicks OK the page posts back and the object is deleted. However, if the user clicks Cancel the button click is ignored and nothing happens. Let's take a look at the code behind this:

Javascript part:

<script type="text/javascript">
function confirmDelete() {
return window.confirm("You really want to delete all your work?");
}
</script>


ASPX side:

<asp:button id="btnDelete" onclick="btnDelete_Click" runat="server" text="Delete" tooltip="Permanetly remove this item" onclientclick="javascript:return confirmDelete();" />


That's it.

No comments: