Home arrow JavaScript arrow Page 3 - JavaScript Events
JAVASCRIPT

JavaScript Events


In our last article we left off with a glimpse of JavaScript Events. In this tutorial we are going to go through each one and learn how to use them to create more dynamic web sites. So slap on your seat belts and get your helmets ready. This is gonna be an action-packed episode.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
November 26, 2007
TABLE OF CONTENTS:
  1. · JavaScript Events
  2. · OnBlur
  3. · OnChange
  4. · OnClick
  5. · OnDblClick

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
JavaScript Events - OnChange
(Page 3 of 5 )

If a user changes the value of a field, you may wish to punish them. Or alert them, whatever you think is appropriate. Heck maybe you want them to change it; you can throw them a party for all I care. Whatever it is you want to have happen when a value is changed, here is some code to demonstrate how to do it.


<html>


<head>

<script type="text/javascript">

function popup(x)

{

alert('No don't do that.')

}

</script>

</head>


<body>


Place Your Order: <input type="text" id="food" value="hamburger" onchange="popup(this.id)">


</body>

</html>

This code creates a function and a text box with the default value of hamburger. The caption reads: Place Your Order. If you change the text in the text box, it triggers the function, which causes a pop-up button to appear saying: No don’t do that.

You will note that in the pop-up button text I used ’ to insert an apostrophe. If you forget to do so, the code will not work.


Supporting HTML Tags: <input type="text">, <select>, <textarea>

Supporting Javascript Objects: fileUpload, select, text, textarea


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
- Dynamic jQuery Styling

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials