I'm building a server and learning to code at the same time. For practice, I wrote one ajax form element on my apache index page. It is designed to check a zip code. It doesn't work. I discovered along the way the php script says the $_POST array is not set.
As a part of debugging, I rewrote the php script to specifically tell me if the $POST variable was set. It continues not to be. Javascript seems to work, because the string returned by innerHTML lands on the browser exactly where I want the correct answer to be, but it is always a php error plus the phrase sent by the php script I wrote - telling me the $POST array is empty.
I wrote some javascript to see what was going on with readyState. That code is shown commented out. The alert boxes appear several times with readyStates that count to 4.
THE ERROR:
Notice: Undefined index: zip in /var/www/html/cgi-bin/zipcode.php on line 2 zip is not set
"zip is not set" is the string to be returned if zip is not set
Some php.ini settings:
request_order = "GP"
variables_order = On
post_max_size = 8MB
I execute the javascript with the button "Check ZIP".
The Code:
//BEGIN INDEX PAGE CODE
<!DOCTYPE html>
<xhtml>
<head>
<title>My Web Page</title>
<style type="text/css">
#horizontal ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {margin: 20em;}
#form {margin: 1em 1em;l}
#answer {
padding: .2em .2em;
margin: .5em 0 .5em 0;
}
#horizontal ul li {
display: inline;
width: 200px;
height: 50px;
background: #ccc;
text-align: center;
padding: .3em;
}
</style>
</head>
<body>
<noscript>Please Enable Javascript</noscript>
<p>Do you like the color green?</p>
<form id="form">
<input type="radio" name="yes" value="yes">
Yes<br>
<input type="radio" name="no" value="no">
No<br>
</form>
<div id=horizontal>
<form name="dan">
<ul>
<li>Sunday December 4 2011</li>
<li></li>
<li style="color: green;">Zip</li>
<li><input type="text" name="getzip" id="getzip" size="5" maxlength="5"/></li>
<li id="answer" style="green"></li>
<li><input type="button" value="Check Zip" onclick="checkzip();"/></li>
</ul>
</form>
</div>
<script type="text/javascript">
<!--
var request;
try { request = new XMLHttpRequest();
} catch (e) {
if(request=undefined) alert('e.message');
}
//-->
</script>
<script type="text/javascript">
<!--
//function checkData(){
// alert(request.readyState);
// }
function checkzip() {
if(request.readyState == 4){
if(request.status == 200){
var ajaxAnswer=document.getElementById("answer");
ajaxAnswer.innerHTML = request.responseText;
}
else {
alert("No Ajax Zip Code Response");
}
}
}
var zip = encodeURIComponent(document.getElementById("getzip").value);
var parameters = "getzip="+zip
request.open("POST", "/cgi-bin/zipcode.php", true);
//request.onreadystatechange = checkData;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
request.send(parameters);
//-->
</script>
</body>
</xhtml>
//END INDEX PAGE CODE
//BEGIN PHP CODE
<?php
$zip = $_POST["zip"]; (tried this line with single and double quotes around zip)
if(isset($zip)) {
echo "zip is set";
}
else
{
echo "zip is not set";
}
?>
The last part of the error message returned through innerHTML comes from this script. The error message is delivered through innerHTML. Does that mean the javascript works?
I don't know how to get this working.
