nastanford/dataExample.cfm

## dataExample.cfm
<cfsetting showdebugoutput="false">

Data Example

<cfdump var="#form#">

## simpleAjaxExample002.cfm
<cfsetting showdebugoutput="false">

<html>
<head>
<title>Simple Ajax Example 002</title>
<script language="Javascript">
	function xmlhttpPost(strURL,myDivID) {
	    var xmlHttpReq = false;
	    var self = this;
	    // Mozilla/Safari
	    if (window.XMLHttpRequest) {
	        self.xmlHttpReq = new XMLHttpRequest();
	    }
	    // IE
	    else if (window.ActiveXObject) {
	        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	    }
	    self.xmlHttpReq.open('POST', strURL, true);
	    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	    self.xmlHttpReq.onreadystatechange = function() {
	        if (self.xmlHttpReq.readyState == 4) {
	            updatepage(self.xmlHttpReq.responseText,myDivID);
	        }
	    }
	    self.xmlHttpReq.send(getquerystring());
	}

	function updatepage(str,myDivID){
	    document.getElementById(myDivID).innerHTML = str;
	}

	/* This will send down the information. */
	function getquerystring() {
		var testTextBoxValue = document.getElementById('testTextBox').value;
		var testRadioValue = document.getElementById('testRadio').value;
		var textCheckBoxVal1 = document.getElementById('testCheckBox1');
		var textCheckBoxVal2 = document.getElementById('testCheckBox2');
		var textCheckBoxVal3 = document.getElementById('testCheckBox3');

		if (textCheckBoxVal1.checked) {
			var testCheckBox1Value = document.getElementById('testCheckBox1').value;
		}
		if (textCheckBoxVal2.checked) {
			var testCheckBox2Value = document.getElementById('testCheckBox2').value;
		}
		if (textCheckBoxVal3.checked) {
			var testCheckBox3Value = document.getElementById('testCheckBox3').value;
		}

	    qstr = 'testSelectBox='+getSelectedValue('testSelectBox')+'&testTextBox='+testTextBoxValue+'&testRadio='+testRadioValue+'&testCheckBox1='+testCheckBox1Value+'&testCheckBox2='+testCheckBox2Value+'&testCheckBox3='+testCheckBox3Value;
	    return qstr;
	}

	function getSelectedValue(myID){
		var e = document.getElementById(myID);
		var dspValue = e.options[e.selectedIndex].value;
		return dspValue;
	}
</script>
</head>
<body>
	<br />
<form name="frmTest">
	<input name="testTextBox" id="testTextBox" value=""> <br /><br />
	<select name="testSelectBox" id="testSelectBox">
		<option value="1">Test 1</option>
		<option value="2">Test 2</option>
		<option value="3">Test 3</option>
	</select> <br />
Radio <br />

	<input name="testRadio" id="testRadio" type="radio" value="rad1"> Radio 1<br />
	<input name="testRadio" id="testRadio" type="radio" value="rad2"> Radio 2 <br />
	<input name="testRadio" id="testRadio" type="radio" value="rad3"> Radio 3 <br />
CheckBox <br />
	<input name="testCheckBox1" id="testCheckBox1" type="checkbox" value="chk1"> CheckBox 1<br />
	<input name="testCheckBox2" id="testCheckBox2" type="checkbox" value="chk2"> CheckBox 2 <br />
	<input name="testCheckBox3" id="testCheckBox3" type="checkbox" value="chk3"> CheckBox 3 <br />
<br />
	<input value="Submit" type="button" onclick='JavaScript:xmlhttpPost("dataExample.cfm","result")'></p>
	<div id="result"></div>
</form>
</body>
</html>
	<cfsetting showdebugoutput="false">

	Data Example

	<cfdump var="#form#">
	<cfsetting showdebugoutput="false">

	<html>
	<head>
	<title>Simple Ajax Example 002</title>
	<script language="Javascript">
	function xmlhttpPost(strURL,myDivID) {
	var xmlHttpReq = false;
	var self = this;
	// Mozilla/Safari
	if (window.XMLHttpRequest) {
	self.xmlHttpReq = new XMLHttpRequest();
	}
	// IE
	else if (window.ActiveXObject) {
	self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	self.xmlHttpReq.open('POST', strURL, true);
	self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	self.xmlHttpReq.onreadystatechange = function() {
	if (self.xmlHttpReq.readyState == 4) {
	updatepage(self.xmlHttpReq.responseText,myDivID);
	}
	}
	self.xmlHttpReq.send(getquerystring());
	}

	function updatepage(str,myDivID){
	document.getElementById(myDivID).innerHTML = str;
	}

	/* This will send down the information. */
	function getquerystring() {
	var testTextBoxValue = document.getElementById('testTextBox').value;
	var testRadioValue = document.getElementById('testRadio').value;
	var textCheckBoxVal1 = document.getElementById('testCheckBox1');
	var textCheckBoxVal2 = document.getElementById('testCheckBox2');
	var textCheckBoxVal3 = document.getElementById('testCheckBox3');

	if (textCheckBoxVal1.checked) {
	var testCheckBox1Value = document.getElementById('testCheckBox1').value;
	}
	if (textCheckBoxVal2.checked) {
	var testCheckBox2Value = document.getElementById('testCheckBox2').value;
	}
	if (textCheckBoxVal3.checked) {
	var testCheckBox3Value = document.getElementById('testCheckBox3').value;
	}

	qstr = 'testSelectBox='+getSelectedValue('testSelectBox')+'&testTextBox='+testTextBoxValue+'&testRadio='+testRadioValue+'&testCheckBox1='+testCheckBox1Value+'&testCheckBox2='+testCheckBox2Value+'&testCheckBox3='+testCheckBox3Value;
	return qstr;
	}

	function getSelectedValue(myID){
	var e = document.getElementById(myID);
	var dspValue = e.options[e.selectedIndex].value;
	return dspValue;
	}
	</script>
	</head>
	<body>
	<br />
	<form name="frmTest">
	<input name="testTextBox" id="testTextBox" value=""> <br /><br />
	<select name="testSelectBox" id="testSelectBox">
	<option value="1">Test 1</option>
	<option value="2">Test 2</option>
	<option value="3">Test 3</option>
	</select> <br />
	Radio <br />

	<input name="testRadio" id="testRadio" type="radio" value="rad1"> Radio 1<br />
	<input name="testRadio" id="testRadio" type="radio" value="rad2"> Radio 2 <br />
	<input name="testRadio" id="testRadio" type="radio" value="rad3"> Radio 3 <br />
	CheckBox <br />
	<input name="testCheckBox1" id="testCheckBox1" type="checkbox" value="chk1"> CheckBox 1<br />
	<input name="testCheckBox2" id="testCheckBox2" type="checkbox" value="chk2"> CheckBox 2 <br />
	<input name="testCheckBox3" id="testCheckBox3" type="checkbox" value="chk3"> CheckBox 3 <br />
	<br />
	<input value="Submit" type="button" onclick='JavaScript:xmlhttpPost("dataExample.cfm","result")'></p>
	<div id="result"></div>
	</form>
	</body>
	</html>