Hey all, I am trying to write my first Ajax script.....I downloaded a demo and basically tried copying it and it did not work. My PHP scripts that are tied to it work, however on the form, my onclick="getName();" or onChange="getName();" does not work. onkeyup="doWork();" works just fine. can someone point me in the right direction, thanks.
****Javascript******
function getHTTPObject(){
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function doWork(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "upperCase.php?inputText=" + document.getElementById('f').value, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
function getName(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "name.php?inputText=" + document.getElementById('name').value, true);
httpObject.send(null);
httpObject.onreadystatechange = setName;
}
}
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById('outputText').value = httpObject.responseText;
}
}
function setName(){
if (httpObject.readyState == 4) {
document.getElementById('outputText2').value = httpObject.responseText;
}
}*****PHP****
***upperCase.php***
<?php
if (isset($_GET['inputText']))
echo strtoupper($_GET['inputText']);
?>***name.php***
<?php
if (isset($_GET['inputText'])) {
echo "You better get to work ". $_GET['inputText'] ."!!!";
}
?>****form page****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - PHP example</title>
<script type="text/javascript" src="testScripts.js"></script>
</head>
<body>
<form name="testForm">
Input text: <input type="text" onkeyup="doWork();" name="f" id="f" />
<br />
Select Choice: <input type="radio" value="lance" name="name" id="name" onclick="getName();" />Lance
<input type="radio" value="james" name="name" id="name" onclick="getName();" />James
<br />
<br />
Output text: <input type="text" name="outputText" id="outputText" />
<br />
Output text2: <input type="text" name="outputText2" id="outputText2" />
</form>
<br />
<div id="textArea">
</div>
</body>
</html>