<!-- javascript library to handle processing form submissions via AJAX // --> 

<!-- Function: Make Request -->
<!-- Descript: Handles the direct request of server-side urls with paramaters -->
<!-- Descript: The results of the AJAX call are returned in HTML to the (alertContents) function -->
<!-- Descript: The state of the request is determined and the result is passed to a DIV layer -->

var http_request = false;
function makeRequest(url, params)
{
	http_request = false;
	if (window.XMLHttpRequest)
	{ // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType)
		{
			// set type accordingly to anticipated content type
			//http_request.overrideMimeType('text/xml');
			http_request.overrideMimeType('text/html');
		}
	} else if (window.ActiveXObject)
	{ // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e)
		{
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (!http_request)
	{
		alert('Cannot create XMLHTTP instance');
		return false;
	}
	
	http_request.onreadystatechange = alertContents;
	http_request.open('POST', url, true);
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	http_request.setRequestHeader("Content-length", params.length);
	http_request.setRequestHeader("Connection", "close");	
	http_request.send(params);
}

<!-- Function: alertContents -->
<!-- Descript: This function checks the state of the AJAX request -->
<!-- Descript: If the request is a 200, the server-side request is sent to an innerHTML DIV -->
<!-- Descript: If the request is not a 200, an alert message is displayed -->

function alertContents()
{
        if (http_request.readyState == 4)
        {
                if (http_request.status == 200)
                {
			// TOGGLE AJAX RESPONSE DIV
			toggleDIV('ajaxResponse');
                        
			result = http_request.responseText;
                        document.getElementById('ajaxResponse').innerHTML = result;
	
                } else
                {
                        alert('There was a problem with the request.');
                }
        }
}

<!-- Function: processForm -->
<!-- Descript: This function gathers all form elements to send to server-side script. -->
<!-- Descript: The form object is passed to the function. -->

function processForm(fobj,url,valFunc)
{

	// TOGGLE AJAX RESPONSE DIV
	toggleDIV('ajaxResponse');

	var str = "";
	var valueArr = null;
	var val = "";
	var cmd = "";
	for(var i = 0;i < fobj.elements.length;i++)
	{
		switch(fobj.elements[i].type)
		{
			case "text":
			if(valFunc)
                    	{
                        	//use single quotes for argument so that the value of
                        	//fobj.elements[i].value is treated as a string not a literal
                        	cmd = valFunc + "(" + 'fobj.elements[i].value' + ")";
                        	val = eval(cmd)
                    	}
                    	str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&";
                     	break;
               		
			case "select-one":
                    	str += fobj.elements[i].name + "=" + fobj.elements[i].options[fobj.elements[i].selectedIndex].value + "&";
                    	break;

			case "textarea":
                    	str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&";
                    	break;

			case "radio":
			if (fobj.elements[i].checked)
			{
				str += fobj.elements[i].name + "=" + fobj.elements[i].value + "&";
			}
			break;
           	}
	}

	str += "processRequest=1";
	//str = str.substr(0,(str.length - 1));

	<!-- make ajax request -->
	makeRequest(url,str);
}

<!-- Function: toggleDIV -->
<!-- Descript: This function hides/shows the specified DIV. -->
<!-- Descript: The form object is passed to the function. -->

function toggleDIV(id)
{
	el = document.getElementById(id);
	if (el.style.display == 'none')
	{
		el.style.display = '';
	} else {
		el.style.display = 'none';
	}
}