Red Alert: Free JavaScript Form-Length-Checker

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Red Alert: Automatic JavaScript Form-Length-Checker
Great free utility if you are using feedback-forms on your website! Red Alert changes the background-color of textfields to red if the text of your visitor gets too long. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10, Google Chrome 3x/4x.

Test the script
Write a very long text in the textfields below:

Install the script

Step 1: Open your webpage. Paste the following code between the <head> and </head> tags:

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

// Configure the alert color. 
var alertcolor="red"

// Do not change the code below
var formobj
var styleobj

function getnames(formname,fieldname) {
	var frmname=formname
	var fldname=fieldname
	formobj=eval("document."+formname+"."+fieldname)
	styleobj=eval("document.getElementById('"+fieldname+"').style")
	checkcolor()
}

function checkcolor() {
	if((formobj.value == null ) || (formobj.value.length < formobj.maxLength)) { 
		styleobj.backgroundColor="white"
	}
	if(formobj.value.length >= formobj.maxLength) { styleobj.backgroundColor=alertcolor;
	}
	var timer=setTimeout("checkcolor()",500)
}
</script>

Step 2: Open your webpage. Create a form with textfields between the <body> and </body> tags.
See blue-red-purple-brown-green sample below:

code red: give your form a name.
code purple: give each textfield an id.
code brown: set the maximal length of the fexfields (letters).
code green: add this code to each textfield.