OnClick Event In DHTML – CSITQuestions

OnClick Event In DHTML You may be well ahead of me here, but I’ll say it anyway: OnClick works exactly like onMouseOverexcept onClick creates the effect when you click on the active text or image. Here’s the alert method example from above using onClick: <A HREF=”http://csitquestions.com” onClick=”javascript:alert(‘Hello out there!’);” target=”_blank”>csitquestion PVT LTD</A> And here’s what it gives you. You’ll need to click to get the effect: Same effect, but you have to click on it first.

And you also probably noticed the link worked. Hint: If you use the onClick Event Handler inside a guestbook form submit button and point the onClick to another page, you’ll get the effect of someone submitting the form and then being transferred to another page that says “Thanks.”

It does nothing to the e-mail and has no effect on the guestbook, but it gives a great look. The code would be something like this: <INPUT TYPE=”submit” onClick=”parent.location=’thankspage.php'”> Now, you may be thinking that onClick is just another version of onMouseOver and can only be used in hypertext links. Not so. See the hint I gave above? OnClick really shines when you use it with form-based link buttons.

If you don’t know what a link button is, read So, You Want A Link Button, Huh?. Let’s get into a few examples, shall we? OnClick With Form Buttons Why make your users click on the BACK and FORWARD buttons way at the very top of the browser screen when you could plop them right on the page? Look at this: Now here’s the code: <FORM> <INPUT TYPE=”button” VALUE=”BACK” onClick=”history.go(-1)”> <INPUT TYPE=”button” VALUE=”FORWARD” onClick=”history.go(1)”> </FORM> Here’s What’s Happening: • <FORM> starts the button. • Input Type=”button” is pretty self-explanatory. • Value=”—” denotes what will be written on the button. • onClick= denotes that the event will activate when clicked on.• “history.go(##)” is JavaScript that denotes movement through your history file.

That’s the file that keeps a record of everywhere you’ve been during that particular surfing jaunt: (1) sends it forward one step, (-1) sends you backward one step.

If you’d like, you could raise or lower those numbers. Setting it to (-4) will take your user back four pages if he or she has that many page in their history file. If not, then the button will not function. • </FORM> ends the button. You should also know that you could separate these two, employing only one button. Just make sure you keep the beginning and end <FORM> command in place. Complete code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head><title>OnClick demo </title>

</head>

<body>

<hr>

OnClick Demo

<hr>

<FORM>

<INPUT TYPE=”button” VALUE=”BACK”

onClick=”history.go(-1)”>

<INPUT TYPE=”button” VALUE=”FORWARD”

onClick=”history.go(1)”>

</FORM>

</body>

</html>

Links Within Pages People ask me all the time how to get link buttons to do jumps within pages. The quick answer is that you can’t. The link button places a “?” on the end of its links. That messes it up. But through the magic of an onClick Event Handler… Here’s what made it. Copy the code and place it on your page where you want the button to appear. <FORM> <INPUT TYPE=”button” VALUE=”Click To Go To the Bottom Of The Page” onClick=”parent.location=’#TOP”></FORM> Please note that the full INPUT TYPE line of text should all be on the same line. Here’s What’s Happening The button is created the same as above except: onClick=”parent.location=’#code'” You saw parent.location above.

It means to load a page into the browser window. The ‘#code’ denotes the point where this script will jump to. See, you’re not offering a new page, so the script must look to the current page. On that page there will be a place called #code. If you haven’t already, read all about page jumps in my page jump tutorial.

It’ll help you understand this a little better. Denote the point on the page the button will jump to by placing: <A NAME=”code”> It’s the same format as you would use with a text-based page jump link.

You will need to choose a new “code” for every point you denote on the page. E-Mail Button How about a button that creates e-mail? Here you go: Here’s What Did It: Please note that the full INPUT TYPE line of text should all be on the same line. The button works the same way as the link button above but this time it is enacting a simple mailto: like you would use to create an e-mail hypertext link.

If you use this button, be sure to change out your e-mail address where mine sits now. And remember, no space between mailto: and the address. Complete code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title> [onClick email Demo] </title>

</head>

<body>

<B>email demo</b>

<hr>

<FORM>

<INPUT TYPE=”button” VALUE=”Click Here to Contact US”

onClick=”parent.location=’mailto:[email protected]'”>

</FORM>

</body>

</html>