Running Javascript from 'onclick()' inside an asp:Button
Here's another one that jumped up and bit me in the rear when I switched over
from straight HTML to ASP.Net pages...
A. Javascript function inside the <head>...</head> or
<body>...</body> tags of your .html page:
<script=javascript>
function buttonclick() {
alert('You Clicked Me');
}
</script>
B. Somewhere inside the <body>...</body> tags of your .html
page:
<input type=button value='I dare you to click me'
onclick='buttonclick()'>
And it works every time. - Short and sweet. - When you click the button, it runs
the function 'buttonclick()' which shows the alert box. - Click 'OK' in the alert
box and it goes away. - Nothing else happens.
The reason this happens the way it does is because this all takes place on the
client side. - The server never gets involved.
Enter ASP.Net
Whenever you set up anything in ASP.Net that is 'clickable', ASP.Net
thinks you're going to either open up something else (i.e. an <href.....>) or
do a postback (i.e. an input button). - But there IS a way to still run your
Javascript(s). - It's just a little tricky to set up for the newbie. - But after you
do a few, you'll be okay with it.
The code:
A. - Our Javascript function:
<script language="javascript" type="text/javascript">
function buttonclick() {
alert('You Clicked Me');
}
</script>
Note 1: Notice that the only thing changed was the first
line to add all the double quotes and the 'type' statement. - This was to make the
page 'XHTML 1.0 Transisitional' compliant.
Note 2: This function can really go anywhere... Inside the
<head>...</head> or <body>...</body> tags of
your 'Master Page', **OR** Inside of the
<asp:Content>...</asp:Content> tags of your '.aspx' page, **OR**
even inside a linked Javascript 'src' file. - Personally, I like to keep mine inside
my '.aspx' pages.
B. - The ASP.Net code:
<asp:button ID="MyButton" runat="server"
text="I Dare You to Click Me" />
Notice that with the ASP Button, we use text instead of value?
Welcome to ASP:Net...
Gotcha #895 - For this to work, your <asp:button........./> tag
must reside inside a set of <asp:form id="myForm" runat="server">
</form>tags (also specified to 'runat="server"').
Gotcha #896 - Obviously, these <asp:form .... ></form>
tags MUST reside inside the
<asp:Content>...</asp:Content> tags of your '.aspx' page,
Gotcha #897 - Expanding on 'Gotcha 896', a page can NOT have more
one set of <form>...</form> tags. - So if your Master Page has a
'form', one isn't necessary in your .aspx page.
C. - The 'code behind' stuff... - Since we're planning to do something when
our button's clicked that ASP.Net is not expecting, we need to tell ASP.Net
in advance what we're planning to do (i.e kick off a JavaScript). - We'll do this
when the page load loads by adding an 'event handler' to our button.
This is done in our 'code behind'. - This can be either a script in the page
itself or separate code in a 'code behiind' page. - Since we're using VB in
separate code page, we'll add this to our '.vb' file for this page.
In our .aspx page's '.vb' file, add the following somewhere inside the
'class':
Protected Sub page_load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
MyButton.Attributes.Add("onClick", "buttonclick();")
End Sub
If you already have a 'page_load' subroutine, just add the middle
line (above) to the end of it.
Okay - We're good to go!
What happens now is when the button's clicked, the Javascript runs. And after you
click 'OK' on the alert box a postback will then take place.
Hey! - Wait a minute! - I DO NOT want a postback to happen!! - Just run the
$%&# Javascript!!
No Problem. - Just change the 'MyButton.Attributes' line in your vb file to look
like this:
MyButton.Attributes.Add("onClick", "buttonclick(); return false;")
The 'return false;' is what does the trick.
A couple of examples. - Try 'em out:
|