function validate_form() {
	var has_error=0;
	var empty_element=0;
	var x=document.forms['add_form'];
//	var x=document.forms[0];                   work's stand alone (multiple  form)on //	var x=document.getElementById('add_form');  work's stand alone only
	var div_handle = document.getElementById("form_message");
	div_handle.innerHTML = "";
	var error_message = "";
 
// here is x.length is undefined when dhtml'd in to the parents div ??  :(
for (var i=0;i<x.length;i++)
  	{
        empty_element=0;
		blah = x.elements[i].value;
//        alert( x.elements[i].id + ":" + x.elements[i].length +" => Blah:"+ blah + " len:"+ blah.length);
		if (blah.length == 0)
		{ empty_element=1; }
		switch (x.elements[i].id)
		{
		case "f_gr_title":
.. <snip code>
			x.elements[i].focus();
			}
	  		break;
		} // switch
	} // for
 
if (has_error) 	{
		div_handle.innerHTML = div_handle.innerHTML+"<br><br>";
	}
	else {
		x.submit();  // submit the form if we have no errors..
	}
 
} // validate_form

<cfform id="add_form" action="index.cfm?act=add" method="POST" name="add_form" enctype="multipart/form-data" onreset="javascript:document.getElementBy('f_gr_title').focus();"> 
 
<TABLE border="1" cellpadding="1" cellspacing="0" bordercolor="##D2D2D2">
<!---------------- Title ----------------------->
<tr><td align="right">Title</td>
<td><input type="text" size="60" value="" id="f_gr_title" name="f_gr_title" maxlength="60" /> 
</td></tr>
<!---------------- Description ----------------------->
<tr><td align="right">Description</td>
<td> 
<textarea name="f_gr_description" cols="60" id="f_gr_description" height="30">
</textarea>
</td></tr>
<!---------------- Type ----------------------->
<tr><td align="right">Type</td>
<td><cfselect enabled="yes" accesskey="g_tcode" query="qry_type" id="f_gr_type" name="f_gr_type" display="g_tcode" value="g_tvalue" 
onChange="javascript:{if (document.getElementById('f_gr_type').value == 'Other') {
	var d = document.createElement('div');
	var zz = document.createElement('input');
	zz.setAttribute('type', 'text');
	zz.setAttribute('name', 'f_gr_type_other');
	zz.setAttribute('id', 'f_gr_type_other');
	zz.setAttribute('size', '60');
	d.appendChild(zz);
	document.getElementById('otherdiv').appendChild(d);
	document.getElementById('f_gr_type_other').focus();
} 
else {
// blank out the other_type text if they go to standard type..
	var div_handle = document.getElementById('otherdiv');
	div_handle.innerHTML = '';
//	dynamic_content('otherdiv','');
 
}};">
</cfselect>
<div id="otherdiv">
</div>
</td>
</tr>
 
<!---------------- Status ----------------------->
<tr><td align="right">Status</td>
<td>
<input type="text" value="Pending" name="f_gr_status" id="f_gr_status" disabled="disabled">
</td></tr>
</TABLE>
 
<br>
<div id="form_message" name="form_message"></div>
 
<!---------------- Buttons ----------------------->
<input type="reset" onclick="javascript:document.forms['add_form'].elements['f_gr_title'].focus();"/> 
<input type="button" onClick="javascript:cancel_add();" value="Cancel " id="cancel_button">
<input type="button" onClick="javascript:validate_form();" value="Add Request " id="add_button">
</cfform>

onclick="myFunction('my_element')"

new Effect.BlindDown('my_element'); // (Scriptaculous)