Code Examples -> Enchancing dd/mm/yyyy forms with unobtrusive javascript

	Join us on FaceBook
	Submit Your Code
	Poker Tournaments
	Poker Guide for Developers
	SEO Monitor
	UpTime Monitor
	My Favorite Examples
	My Favorite Articles
	Update Your Profile

More Weber Sites
	PHP Code Search
	Web Development Forums
	Learn MySQL Playing Trivia
	PHPBB2 Templates
	Web Development Resources
	Web Development Content
	Internet Security Software

Recommended Links
	PHPClasses
	PHP Editor
	PHP Jobs
	Vision.To Design
	Ajax Tutorials
	PHP Programming Help
	PHP/MySQL Programming
	Webmaster Resources
	Webmaster Forum
	XML meta language
	website builder

Recommended
	פרייסז - הכח לקנות עובר לידיים שלך
	Texas Holdem Poker Evangelists


BACK		ADD A COMMENT		SEND TO A FRIEND		ADD TO MY FAVORITES		ADD CODE EXAMPLES		PRINT

PHP Code Examples

Title :	Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories :	Java Script, HTML, User Interface, Date Time	Ioannis Cherouvim
Date :	Dec 12th 2005
Grade :	3 of 5 (graded 7 times)
Viewed :	15233
File :	No file for this code example.
Images :	No Images for this code example.

Search :	More code by Ioannis Cherouvim
Action :	Grade This Code Example
Tools :	My Examples List

Code

**************************************************************
* title : Enchancing dd/mm/yyyy forms with unobtrusive javascript
*
* story : Two javascript functions to enchance interaction with
* HTML forms. The focusForm will focus to the first
* input type='text' field which is not disabled.
*
* The applyDates function will draw dd, mm, and yyyy letters
* in the appropriate fields. These will be erased on focus
* and redraw again on blur and when the user hasn't
* writen anything in them. It's pretty useful because
* you dont have to explicitly state what goes in which
* field with extra <label> elements on the markup.
* So just have a class='dd' or class='mm' or class='yyyy'
* in the fields you want this behaviour to be applied
* and the rest will be done for you.
*
* Live demo @ LINK1http://temp.cherouvim.com/forums/ddmmyyyyLINK1
*
* author : Ioannis Cherouvim
* web : http://cherouvim.com
* date : 2005-12-12
**************************************************************

//////////////////////////////////////////////////////////////
//script.js

applyDates = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length; i++) {
if ((inputs[i].className=='dd') ||
(inputs[i].className=='mm') ||
(inputs[i].className=='yyyy') ) {

inputs[i].setAttribute('autocomplete', 'off');

if (inputs[i].value=='')
inputs[i].value=inputs[i].className;

inputs[i].onfocus=function() {
if(this.value==this.className)
this.value='';
}
inputs[i].onblur=function() {
if(this.value=='')
this.value=this.className;
}
}
}
}

focusForm = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length; i++) {
if ((inputs[i].getAttribute("type"))=="text" && !inputs[i].disabled) {
inputs[i].focus();
return;
}
}
}

window.onload = function() {
if(document.getElementById && document.createTextNode) {
focusForm();
applyDates();
}
}

//////////////////////////////////////////////////////////////
//demo HTML

<html>
<head>
<script type='text/javascript' src='script.js'></script>
</head>
<body>

<label for='name'>Name:</label>
<input maxlength='16' id='name' name='name' type='text'/><br/>
<label for='dob'>Date of Birth:</label>
<input maxlength='2' size='2' id='dob' class='dd' name='dd' value='' type='text'/>
<input maxlength='2' size='2' class='mm' name='mm' value='' type='text'/>
<input maxlength='4' size='4' class='yyyy' name='yyyy' value='' type='text'/><br/>
<label for='email'>E-Mail:</label>
<input maxlength='32' id='email' name='email' type='text'/><br/>

</body>
</html>

Related Code Examples

	Higly Customizable Javascript Calendar Script Categories : Java Script, Calendar, Date Time, HTML, CSS
	Clock at Status Bar Categories : Java Script, HTML, Date Time
	Table editable dynamic form with edit + selection (select / option) + checkbox. Categories : Java Script, DHTML, User Interface, CSS, HTML
	Javascript Color Picker Categories : Java Script, Colors, HTML
	Java Script Based Navigation Categories : HTML, Java Script, Navigation
	Simple Javascript CSS Digital Clock Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design
	Cool tool tip Categories : Java Script, HTML, Web Design
	Show or Hide your Content using Javascript Categories : Java Script, HTML, CSS, Beginner Guides
	Fancy Quick Access Navigation Link Categories : Java Script, Navigation, User Interface, DHTML, Beginner Guides
	Calendars to choose a range of dates , reservation events ... Categories : PHP, Calendar, Java Script, Date Time
	showing Help (assistance) to the user while filling html forms. Categories : HTML, Java Script, Form Processing
	Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers. Categories : Java Script, HTML, General
	Conditional Check - a script that allows a user to submit a form only if the user check a checkbox. Categories : HTML, Java Script, Form Processing, Beginner Guides
	PHP Calendar Categories : PHP, Calendar, Date Time, Java Script, CSS
	Date Validation using JavaScript. Intended to use it as checkdate() from PHP. Categories : Java Script, Date Time, PHP