Saturday, April 30, 2011

JavaScript Void(0) - XVI


Sometimes, you may need to call some JavaSript from within a link. Normally, when you click a link, the browser loads a new page (or refreshes the same page).
This might not always be desirable. For example, you might only want to dynamically update a form field when the user clicks a link.
To prevent the load from refreshing, you could use the JavaScript void() function and pass a parameter of 0 (zero).

Example of void(0):

We have a link that should only do something (i.e. display a message) upon two clicks (i.e. a double click). If you click once, nothing should happen. We can specify the double click code by using JavaScript's "ondblclick" method. To prevent the page reloading upon a single click, we can use "JavaScript:void(0);" within the anchor link.
Code:

<a href="JavaScript:void(0);" ondblclick="alert('Well done!')">Double Click Me!</a>
Result:

Same Example, but without void(0):

Look at what would happen if we didn't use "JavaScript:void(0);" within the anchor link...
Code:
<a href="" ondblclick="alert('Well done!')">Double Click Me!</a>
Result:
Did you notice the page refresh as soon you clicked the link. Even if you double clicked and triggered the "ondbclick" event, the page still reloads!
Note: Depending on your browser, your browser might have redirected you to the "/javascript/tutorial/" index page. Either way, JavaScript's "void()" method will prevent this from happening.
Void(0) can become useful when you need to call another function that may have otherwise resulted in an unwanted page refresh.

No comments:

Post a Comment