Hi all, I am new here and have been browsing through the forum, but was unable to find anything to solve a problem.
I am trying to create an HTML page with 2 separate AJAX calls, here is what they do:
First Request (function getTeams): Gets info from a user select list and calls 'findteams.php' which returns 3 more select lists into Div 'displayTeams' for further user input.
*This part works fine.
Second Request (function submitPicks): Gets info from the remaining 3 select lists and calls 'update.php' which returns their selection into Div 'yourPicks'.
*Part I need help with.
The first call works fine and the select lists appear in Div 'displayTeams', however, when I try to make the second call, the data appears to be sent (seen in LiveHTTPHeaders), but 'yourPicks' will not update with the return text.
If someone could please take a little time and help me with this, I will send some good luck your way 
Here is the code for html page:
Code:
<html>
<head>
<title>Submit Picks</title>
<script type="text/javascript">
function getXMLHTTP() {
var xmlhttp=false;
try {
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1) {
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getTeams(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('displayTeams').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function submitPick() {
var req2 = getXMLHTTP();
if (req2) {
req2.onreadystatechange = function() {
if (req2.readyState == 4) {
if (req2.status == 200) {
document.getElementById("yourPicks").innerHTML=req2.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req2.statusText);
}
}
}
var home = document.getElementById('home').options[document.getElementById('home').selectedIndex].value;
var away = document.getElementById('away').options[document.getElementById('away').selectedIndex].value;
var score = document.getElementById('score').options[document.getElementById('score').selectedIndex].value;
var queryString = "?score=" + score + "&home=" + home + "&away=" + away;
req2.open("GET", "update.php" + queryString, true);
req2.send(null);
}
}
</script>
</head>
<body>
<form method="post" action="" name="form0">
<h5>Please Select a League:</h5><select name="league" onChange="getTeams('findteams.php?league='+this.value)">
<option value="">Select League</option>
<option value="1">English Premier League</option>
<option value="2">English Championship</option>
</select>
</form>
<br />
<div id="displayTeams">Choices Here</div>
<br />
<div id="yourPicks">Your picks will display here.</div>
</body>
</html>
code for 'findteams.php':
Code:
<?
$league=$_REQUEST['league'];
$link = mysql_connect('localhost', 'admin', 'password');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_name');
$query="SELECT team FROM teams WHERE countryid=$league";
$result=mysql_query($query);
$query2="SELECT team FROM teams WHERE countryid=$league";
$result2=mysql_query($query);
?>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<h5>Home Team:</h5>
<select name="home" id="home">
<option>Select Team</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value="<?=$row['team']?>"><?=$row['team']?></option>
<? } ?>
</td>
</tr>
<tr>
<td>
<h5>Away Team:</h5>
<select name="away" id="away">
<option>Select Team</option>
<? while($row=mysql_fetch_array($result2)) { ?>
<option value="<?=$row['team']?>"><?=$row['team']?></option>
<? } ?>
</td>
</tr>
<tr>
<td>
<h5>Predicted Score:</h5>
<select name="score" id="score">
<option>Select Score</option>
<option value="10">1-0</option>
<option value="20">2-0</option>
<option value="30">3-0</option>
<option value="40">4-0</option>
<option value="00">0-0</option>
<option value="11">1-1</option>
<option value="22">2-2</option>
<option value="33">3-3</option>
<option value="01">0-1</option>
<option value="02">0-2</option>
<option value="03">0-3</option>
<option value="04">0-4</option>
</select>
</td>
</tr>
<br />
<tr>
<td>
<button type="button" onclick="submitPick()">Submit Pick </button>
</td>
</tr>
</table>
</form>
<?
mysql_close($link);
?>
code for 'update.php':
Code:
<?php
$score = $_GET['score'];
$home = $_GET['home'];
$away = $_GET['away'];
echo $home;
echo $away;
echo $score;
?>
Before you post, read our: 
