I am trying to use Ajax to execute a php script which is not working out for me. What i want to archive is to display a php script called "costEstimate" when "Heat Source" is selected from the table on the HTML form but i seem to be doing something wrong as its not displaying.
Here the php script called "costEstimate"
include("classes/DBConnection.php");
include("classes/DBTable.php");
$tableName = $_GET['Pool_Shape'];
$selectedIndex = $_REQUEST['shape'];
$connx = new DBConnection();
$table = new DBTable($tableName, $selectedIndex, $connx);
echo "The information displayed here shows your current spendings for your selected";echo "<br>";echo "<br>";
echo "pool shape and size without a pool cover.";echo "<br>";echo "<br>";
echo "You have selected ".$tableName." pool shape and a ".$table->get_poolSize_feet()."ft pool size:"; echo "<br>";echo "<br>";
echo "Base on our research;"; echo "<br>";echo "<br>";
echo "Your pool contains an average of ".$table->get_h2oVolumn()." Litres of water:"; echo "<br>";echo "<br>";
echo "It cost you an average of £".$table->get_h2oCost()." on water per annum"; echo "<br>";echo "<br>";
echo "You spend an averge total of £".$table->get_chemicalCost()." on chemicals during summer and winter season"; echo "<br>";echo "<br>";
echo "Your average Pump cost is £".$table->get_pumpCost()." per Year."; echo "<br>";echo "<br>";
if($_GET["Shape"] == 'electHeater'){
echo "Your Natural Gas Heater cost an average of £".$table->get_electCost()."per year to heat up your pool.";
}
if($_GET["Shape"] == 'heatPump'){
echo "Your Natural Gas Heater cost an average of £".$table->get_heatPumpCost()."per year to heat up your pool.";
}
if($_GET["Shape"] == 'gasHeater'){
echo "Your Natural Gas Heater cost an average of £".$table->get_gasCost()."per year to heat up your pool.";
}
if($_GET["Shape"] == 'oilHeater'){
echo "Your Natural Gas Heater cost an average of £".$table->get_oilCost()."per year to heat up your pool.";
}
if($_GET["Shape"] == 'propaneHeater'){
echo "Your Natural Gas Heater cost an average of £".$table->get_propaneCost()."per year to heat up your pool.";
}
if($_GET["Shape"] == 'none'){
//echo "Your Natural Gas Heater cost an average of £".$table->get_electCost()."per year to heat up your pool.";
}
here is the AJAX script
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//This is the showcostEstimate function that calls the php script "costEstimate" above
function showCostEstimate(str){
loadXMLDoc("costEstimate.php?type="+str,function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementsByName("heater").innerHTML=xmlhttp.responseText;
document.getElementsByName("Pool_Shape").innerHTML=xmlhttp.responseText;
document.getElementById("Shape").innerHTML=xmlhttp.responseText;
}
});
}
function showPoolSize(str){
if (str==""){
document.getElementById("Shape").innerHTML="";
return;
}
loadXMLDoc("selectSize.php?type="+str,function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("Shape").innerHTML=xmlhttp.responseText;
}
document.getElementById('_Shapes').style.display = 'block';
});
}here is a segment of my HTML code..
<tr>
<td>Pool Shape & Size</td>
<td>
<input type="radio" value="UKOvalPool" name="Pool_Shape" onclick ="showPoolSize(this.value)" >Oval<br>
<input type="radio" value="UKRoundPool" name="Pool_Shape" onclick ="showPoolSize(this.value)">Round<br>
<input type="radio" value="UKRectangularPool" name="Pool_Shape" onclick ="showPoolSize(this.value)">Rectangular<br>
<input type="hidden" name="confirmed" value ="yes">
<div id="_Shapes" name =""style="display:none">
<select id = "Shape" name ="size_In_Feets">
<!--Please note there is a php script here that is called automatically when an option is selected.-->
</select>
</div>
</td>
<td>
<div onclick="return helpMessageDisplay(2)" class="help"><img src ="css/images/questionmark.gif" width ="18" height ="16">
<div id="helpShape"></div>
</div>
</td>
</tr>
<tr>
<td>Heat Source</td>
<td>
<select id="Fuel" name="heater" onclick="enterElectAmount()" onchange="showCostEstimate(this.value)" >
<option VALUE ="">Please Select Heater</option>
<option VALUE ="electHeater">Electric Heater</option>
<option VALUE ="heatPump">Heat Pump</option>
<option VALUE ="gatHeater">Gas Heater</option>
<option VALUE ="oilHeater">Oil Heater</option>
<option VALUE ="propaneHeater">Propane Heater</option>
<option VALUE ="none">None</option>
</select>
<div class="amount" id ="ElectricCost" style=''>Enter cost per year
<input type="text" id="ElecCost" name="heatingCost" id ="ElectricCost" value="" size="5" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" ></div>
</td>
<td>
<div onclick="return helpMessageDisplay(2)" class="help"><img src ="css/images/questionmark.gif" width ="18" height ="16">
<div id="helpShape"></div>
</div>
</td>
</tr>