[RESOLVED] PHP OOP

[ca87]

I am trying to adapt OOP here and was wondering if php can handle it.

I have a class i that i want to use to access various table with similar culmn names from mysql database and was wondering if the following code will do what i want?

private $table;
    private $query;
    private $databaseURL = "127.0.0.1";
    private $databaseUName = "root";
    private $databasePWord = "password";
    private $databaseName = "8BallPool";
    private $connection;



public function __construct($tableName) {


    $this->connection = mysql_connect($this->databaseURL,$this->databaseUName,$this->databasePWord) 
    or die ("Error while connecting to host");
    $db = mysql_select_db($this->databaseName,$this->connection) 
    or die ("Error while connecting to database");
    $this->query = "SELECT * FROM `$tableName`";
    $this->table = mysql_query($this->query);

}




function getPool(){
    return $this->table;
}

function get_pumpCost(){
    $sql = "SELECT poolCost FROM `getPool()` WHERE id = `1`";
    $sqls = mysql_query($sql);
}

will the construct hold the table object so the other function can make use of it?

[NogDog]

I would probably separate out the database connection stuff into a separate class, and pass an instantiation of it to this class. That way you would not create a new DB connection each time this (or any similar) class is instantiated. Also, if you are going to have two different queries (the select all in the constructor and the select poolcost in its own method, then I would move the select all to its own method, so that you do not waste time/resources executing it if you don't need it.

<?php
// general DB class
class DBConnection
{
   private $databaseURL = "127.0.0.1";
   private $databaseUName = "root";
   private $databasePWord = "password";
   private $databaseName = "8BallPool";
   private $connection;
   public function __constrcut()
   {
      $this->connection = mysql_connect($this->databaseURL,
                                        $this->databaseUName,
                                        $this->databasePWord);
      if ($this->connection == false) {
         error_log(mysql_error());
         throw new Exception("Database connection failed");
      }
      if (mysql_selectdb($this->connection) == false) {
         error_log(mysql_error());
         throw new Exception("Select DB failed");
      }
   }
   public function query($sql)
   {
      $result = mysql_query($sql, $this->connection);
      if($result == false) {
         error_log(mysql_error()."\n$sql");
      }
      return $result;
   }
}
// DB table
class DbTable
{
   private $tableName;
   private $db;
   public function __construct($tableName, DBConnection $db)
   {
      $this->table = $tableName;
      $this->db = $db;
   }
   public function getAll()
   {
      $sql = "SELECT * FROM `".$this->tableName."`";
      return $this->db->query($sql);
   }
   public function get_pumpCost($id)
   {
      $id = (int) $id;
      $sql = "SELECT poolCost FROM `".$this->tableName."` WHERE id = $id";
      return $this->db->query($sql);
   }
}
// usage
try {
   $connx = new DBConnection();
   $table = new DbTable('table_name', $connx);
   $result = $table->get_pumpCost(1);
}
catch(Exception $e) {
   echo "<pre>";
   print_r($e);
   echo "</pre>";
}

[ca87]

NogDog;10963223 wrote:

I would probably separate out the database connection stuff into a separate class, and pass an instantiation of it to this class. That way you would not create a new DB connection each time this (or any similar) class is instantiated. Also, if you are going to have two different queries (the select all in the constructor and the select poolcost in its own method, then I would move the select all to its own method, so that you do not waste time/resources executing it if you don't need it.

<?php
// general DB class
class DBConnection
{
   private $databaseURL = "127.0.0.1";
   private $databaseUName = "root";
   private $databasePWord = "password";
   private $databaseName = "8BallPool";
   private $connection;
   public function __constrcut()
   {
      $this->connection = mysql_connect($this->databaseURL,
                                        $this->databaseUName,
                                        $this->databasePWord);
      if ($this->connection == false) {
         error_log(mysql_error());
         throw new Exception("Database connection failed");
      }
      if (mysql_selectdb($this->connection) == false) {
         error_log(mysql_error());
         throw new Exception("Select DB failed");
      }
   }
   public function query($sql)
   {
      $result = mysql_query($sql, $this->connection);
      if($result == false) {
         error_log(mysql_error()."\n$sql");
      }
      return $result;
   }
}
// DB table
class DbTable
{
   private $tableName;
   private $db;
   public function __construct($tableName, DBConnection $db)
   {
      $this->table = $tableName;
      $this->db = $db;
   }
   public function getAll()
   {
      $sql = "SELECT * FROM `".$this->tableName."`";
      return $this->db->query($sql);
   }
   public function get_pumpCost($id)
   {
      $id = (int) $id;
      $sql = "SELECT poolCost FROM `".$this->tableName."` WHERE id = $id";
      return $this->db->query($sql);
   }
}
// usage
try {
   $connx = new DBConnection();
   $table = new DbTable('table_name', $connx);
   $result = $table->get_pumpCost(1);
}
catch(Exception $e) {
   echo "<pre>";
   print_r($e);
   echo "</pre>";
}

Thanks for your help. I tried your code but nothing happened so i modified the DBconnection class adding the specific database i want to select.......here

 public function __constrcut()
   {
      $this->connection = mysql_connect($this->databaseURL,
                                        $this->databaseUName,
                                        $this->databasePWord);
      if ($this->connection == false) {
         error_log(mysql_error());
         throw new Exception("Database connection failed");
      }

  $this->db = mysql_select_db($this->dataBaseName, $coonection);
  if ($this->db == false) {
     error_log(mysql_error());
     throw new Exception("Select DB failed");
  }
   }

even with this modification it still did not work when i echo the result to the html page just to test it.

[johanafm]

ca87;10963376 wrote:

I tried your code but nothing happened

What did you expect would happen? I.e. what does the "nothing" refer to? If you used Nogdog's code as is, there should be no output unless something went wrong:

NogDog;10963223 wrote:

// usage
try {
   $connx = new DBConnection();
   $table = new DbTable('table_name', $connx);
   $result = $table->get_pumpCost(1);
}
catch(Exception $e) {
   echo "<pre>";
   print_r($e);
   echo "</pre>";
}

To actually show what data is returned

$result = $table->...;
if ($result) {
	$row = mysql_fetch_assoc($result);
	...
}

And if this is what you meant with "echoing result", what does your error log look like? Have you tried echoing the query to see if it really is ok?

Other than that, I'd personally change the DbConnection::query method to throw an exception if $result is false to make it consistent with the constructor

class DbConnection {
	# as before

public function query($sql) {
	$result = mysql_query($sql, $this->connection);
	if($result == false) {
		error_log(mysql_error()."\n$sql");
		# since it might be interesting to know what code lead to this query...
		$s = '';
		$d = debug_backtrace();
		for ($i = 0; $i < count($d); ++$i) {
			$s .= $d[$i]['file'] . '('.$d[$i]['line'].'): ' . $d[$i]['fuction'] . PHP_EOL
		}
		error_log($s);
		throw new Exception('Query failed');
	}
	return $result; 
}
}

To make your code more readable (without looking at db schema) and protect encapsulated data I'd extend the generic table class with one class per table, which means you can also drop the constructor argument $table, if your classes and
tables follow the same naming convention

class Pool extends DbTable {
	# data members matching all table fields
	private $id;
	private $pumpCost;		# perhaps this should rather be an object of type Pump
	private $description;

public function _construct($id, $db) {
	parent::__construct($id, $db);
}
public function get_pumpCost() {
	return $this->pumpCost;
}
}
class DbTable {
	public function __construct($id = 0, $db = false) {
		if ($conn == false) {
			throw new Exception("No db connection"); 
		}
		$this->db = $db;
		$this->table = $table;
		$this->id = 0;

	# create object not yet in db.
	# constructor always returns $this, but I prefer being explicit
	if ($id == 0) {
		return $this;
	}

	$result = $db->query('SELECT * FROM '. get_class($this) .' WHERE id='.$id);
	$row = mysql_fetch_assoc($result);
	foreach ($row as $field => $value) {
		$this->$field = $value;
	}
}
}

[ca87]

johanafm;10963393 wrote:

What did you expect would happen? I.e. what does the "nothing" refer to? If you used Nogdog's code as is, there should be no output unless something went wrong:

To actually show what data is returned

$result = $table->...;
if ($result) {
	$row = mysql_fetch_assoc($result);
	...
}

And if this is what you meant with "echoing result", what does your error log look like? Have you tried echoing the query to see if it really is ok?

Other than that, I'd personally change the DbConnection::query method to throw an exception if $result is false to make it consistent with the constructor

class DbConnection {
	# as before

public function query($sql) {
	$result = mysql_query($sql, $this->connection);
	if($result == false) {
		error_log(mysql_error()."\n$sql");
		# since it might be interesting to know what code lead to this query...
		$s = '';
		$d = debug_backtrace();
		for ($i = 0; $i < count($d); ++$i) {
			$s .= $d[$i]['file'] . '('.$d[$i]['line'].'): ' . $d[$i]['fuction'] . PHP_EOL
		}
		error_log($s);
		throw new Exception('Query failed');
	}
	return $result; 
}
}

To make your code more readable (without looking at db schema) and protect encapsulated data I'd extend the generic table class with one class per table, which means you can also drop the constructor argument $table, if your classes and
tables follow the same naming convention

class Pool extends DbTable {
	# data members matching all table fields
	private $id;
	private $pumpCost;		# perhaps this should rather be an object of type Pump
	private $description;

public function _construct($id, $db) {
	parent::__construct($id, $db);
}
public function get_pumpCost() {
	return $this->pumpCost;
}
}
class DbTable {
	public function __construct($id = 0, $db = false) {
		if ($conn == false) {
			throw new Exception("No db connection"); 
		}
		$this->db = $db;
		$this->table = $table;
		$this->id = 0;

	# create object not yet in db.
	# constructor always returns $this, but I prefer being explicit
	if ($id == 0) {
		return $this;
	}

	$result = $db->query('SELECT * FROM '. get_class($this) .' WHERE id='.$id);
	$row = mysql_fetch_assoc($result);
	foreach ($row as $field => $value) {
		$this->$field = $value;
	}
}
}

Nogdog's code works fine ( i was too lazy to check the typo on the DBConnection) when i looped thru the $result as you pointed out and it echoed what i needed!
A generic class sound like a good idea but i will rather stick with the first option for now. Thanks a lot you two!

[ca87]

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 &amp; 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&nbsp;
            <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>

[ca87]

Actually, I just realized one of the mistakes and here is the modified AJAX script. I am now sending the result to a text area but it still not displaying.

function loadXMLDoc(url,cfunc){
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
  }
  else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

function showCostEstimate(str){

  loadXMLDoc("costEstimate.php?heater="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          document.getElementById("disp").innerHTML=xmlhttp.responseText;
      }
      document.getElementById('ElectricCost').style.display ='block';
  });
}

Its seems the php script initialization is wrong too?

<?php

include("classes/DBConnection.php");
include("classes/DBTable.php");


$heater = $_REQUEST['heater'];
$tableName = $_REQUEST['Pool_Shape'];
$selectedIndex = $_REQUEST['size_In_Feets'];
$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>";....?>

Please help.

[johanafm]

ca87;10963536 wrote:

I am now sending the result to a text area but it still not displaying.

Any errors in client? Any errors on server?
My recommendation is using Firefox with the Firebug plugin installed, and at all times have the built in Error console open. IE8 does have better debugging support than previous IE versions, but still falls far short of FF in my opinion. Safari is probably on par with FF + Firebug, but I still prefer FF + Firebug since I find the UI way better.

function showCostEstimate(str){
  loadXMLDoc("costEstimate.php?heater="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          document.getElementById("disp").innerHTML=xmlhttp.responseText;
      }
      document.getElementById('ElectricCost').style.display ='block';
  });
}

Shouldn't .style.display = 'block' be inside the if statement block?

ca87;10963536 wrote:

Its seems the php script initialization is wrong too?

What's the error message(s)? What output does it generate, if any?

ca87;10963536 wrote:

echo "The information displayed here shows your current spendings for your selected";echo "<br>";echo "<br>";

br elements won't work in text areas. They use LF, "\n". Or was it CRLF, "\r\n"?

[ca87]

johanafm;10963615 wrote:

Any errors in client? Any errors on server?.....

function showCostEstimate(str){
  loadXMLDoc("costEstimate.php?heater="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          document.getElementById("disp").innerHTML=xmlhttp.responseText;
      }
      document.getElementById('ElectricCost').style.display ='block';
  });
}

Thanks Johanafm, your suggestions gave me an idea of what was wrong with my coding but i do need help of how to fix it.
The problem is with the Ajax http-request function, while i needed 3 Ajax request

$heater = $_REQUEST['heater'];
$tableName = $_REQUEST['Pool_Shape'];
$selectedIndex = $_REQUEST['size_In_Feets'];

to initialize the "costEstimate.php" only the first was executed! But to get the costEstimate.php script to display all method calls, all the requests need to be executed and parsed but i don't know how to make Ajax request for the 3 all at once.
I modified the showCostEstimate as follows to include the requests but it doesn't do it it?(probably a bad idea)

function showCostEstimate(str){

  loadXMLDoc("costEstimate.php?Pool_Shape?size_In_Feets?heater="+str,function(){

  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      alert(xmlhttp.responseText);//i recon this is a more simpler aproach. 
      document.getElementById('ElectricCost').style.display ='block';
  }
  });
}

[johanafm]

ca87;10963626 wrote:

The problem is with the Ajax http-request function, while i needed 3 Ajax request

$heater = $_REQUEST['heater'];
$tableName = $_REQUEST['Pool_Shape'];
$selectedIndex = $_REQUEST['size_In_Feets'];

I'm not certain I understand what you mean. The php code shown above implies that you want one single ajax request which sends 3 values as either get or post data (or allready exist as session or cookie data). Personally I'd recommend specifying $_GET if you send a get request and $POST if you send a post request, and similarily $whatever if you have your data elsewhere. Especially since you can change the order of which of get, post, session and cookie overrides the other in case of them containing the same array elements in php.ini. See requet order for more info.

So, if you need to fallback to $SESSION if there is no $GET data, rather do

if (empty($_GET['key']) && empty($_SESSION['key'])) {
	$val = 'default value';
}
else if (empty($_GET['key'])) {
	$val = $_SESSION['key'];
}
else {
	$val = deal_with_validation_and_escaping($_GET['key']);
}

As for sending multiple name/value pairs in one request, I'd change the string argument to multiple arguments

function showCostEstimate(heater, shape, size){
	var queryString = '?heater='+window.encodeURIComponent(heater)+'&Pool_Shape='+window.encodeURIComponent(shape)+'&size_In_Feets='+window.encodeURIComponent(size);
  loadXMLDoc("costEstimate.php"+queryString, function(){

ca87;10963626 wrote:

executed and parsed but i don't know how to make Ajax request for the 3 all at once.

Should you really need 3 ajax requests, you just

loadXMLDoc(...);
loadXMLDoc(...);
loadXMLDoc(...);

And as far as I can tell, your javascript should execute, so the question once again is: What happens server side? Have you checked your error log? Have you tried using error_log to do things like

<?php
error_log('ajax request started');
include("classes/DBConnection.php");
error_log(1);
include("classes/DBTable.php");
error_log(2);


$heater = $_REQUEST['heater'];
$tableName = $_REQUEST['Pool_Shape'];
$selectedIndex = $_REQUEST['size_In_Feets'];
error_log(print_r($_GET,1));
$connx = new DBConnection();
error_log(3);

$table = new DBTable($tableName, $selectedIndex, $connx);
error_log(4);

// ...

[ca87]

I'm not certain I understand what you mean. The php code shown above implies that you want one single ajax request which sends 3 values as either get or post data

Thanks again Jo. You are right i want a single ajax request which sends 3 values as $_GET[] without reloading the page. In turns i need to parse the values to the costEstimate script.

johanafm;10963635 wrote:

As for sending multiple name/value pairs in one request, I'd change the string argument to multiple arguments

function showCostEstimate(heater, shape, size){
	var queryString = '?heater='+window.encodeURIComponent(heater)+'&Pool_Shape='+window.encodeURIComponent(shape)+'&size_In_Feets='+window.encodeURIComponent(size);
  loadXMLDoc("costEstimate.php"+queryString, function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
          alert(xmlhttp.responseText);
          document.getElementById('ElectricCost').style.display ='block';
      }
  });
}

Right, so that will get the values i want from the user selection and parse it to costEstimate.php right? but how do i make a call the function on my html section as the function now take 3 parameters?

<tr>
    <td>Pool Shape &amp; 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>

    <div id="_Shapes" name =""style="display:none">
        <select id = "Shape" name ="size_In_Feets">

         </select>
     </div>
 </td>
 <td>
     <div onclick="return helpMessageDisplay(1)" 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.id)" >
            <!--<script type="text/javascript">SBoxSetup('Fuel',Fuel)</script>-->
            <option VALUE ="0">Please Select Heater</option>
            <option VALUE ="1">Electric Heater</option>
            <option VALUE ="2">Heat Pump</option>
            <option VALUE ="3">Gas Heater</option>
            <option VALUE ="4">Oil Heater</option>
            <option VALUE ="5">Propane Heater</option>
            <option VALUE ="6">None</option>
        </select>
            <div class="amount" id ="ElectricCost" style="display:none">Enter cost per year&nbsp;
                <input type="text" id="ElecCost" name="heatingCost" id ="ElectricCost" value="" size="5" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" ></div>

</td>

I only want the alert(request) to pop up when a user selects any one of the "heater" from the drop down menu.

And as far as I can tell, your javascript should execute, so the question once again is: What happens server side? Have you checked your error log? Have you tried using error_log to do things like

I have never tried the error_log so i don't know how to use it. I currently use Netbeans IDE and its just gives hint out compile-time error only. However, firefox error_console did not output any error.

[johanafm]

ca87;10963670 wrote:

how do i make a call the function on my html section as the function now take 3 parameters?
I only want the alert(request) to pop up when a user selects any one of the "heater" from the drop down menu.

Ah, to get those values, I suppose you can't (easily) send them as function arguments.
I'd drop the onchange on the heater select box and create an input type="button" with onclick = showCostEstimate(). It's entirely possible that the user selects heater before shape & size, or that they click the wrong option. If you dislike the extra click for the user, you'd have to set onchange events for all controls (heater, size and shape) and in the event handler check if you have valid selections in each group. If not, send no request.
I'd also create an element to contain the radio buttons. And further I'd rename the previous id="shape" to id="size" to make the code more self explaining.
I also added a div to contain feedback (if user didn't select one or more things).

    <td>Pool Shape &amp; Size</td>
    <td>
    	<div id="shape">
			<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>
		</div>
        <div id="_Shapes" name =""style="display:none">
            <select id="size" name ="size_In_Feets">

         </select>
     </div>

<!-- rest of form -->
<input type="button" onclick="showCostEstimate();" value="Show pool cost">
<div id="feedback"></div>
</form>

Btw, I don't remember when IE added support for getElementsByTagName, so you should double check that it works in whatever versions of IE you want to support. Otherwise you'd have to use the array (well, it's used like an array anyway) shapeDiv.childNodes and check if shapeDiv.childNodes.nodeName == 'INPUT'. Or something like that... Doing alert(shapeDiv.childNodes.nodeName) will give you the info. Also, you might want to have a look at Mozilla's javascript documentation. For DOM stuff, click Gecko DOM Reference on that page.

function showCostEstimate() {
	var d = document;	// just to save on typing
	var shapeDiv = d.getElementById('shape');

/* The div also contain br elements and textNodes, so we can't just
	cycle through shapeDiv's childNodes (without checking what they are).
	This is easier */
var radios = shapeDiv.getElementsByTagName('input');
var shape = false;
// Find out what shape was selected.
for (var i = 0; i < radios.length && shape == false; ++i) {
	if (radios[i].checked == true) {
		shape = radios[i].value;
	}
}

var size = d.getElementById('size').value;
var heater = d.getElementById('heater').value;

// input validation before sending request
var feedback = Array();
if (shape == false) {
	feedback.push('shape');
}
// Havn't seen what this will contain, but I'm assuming the same approach as for heaters
if (size.value == 0) {
	feedback.push('size');
}
if (heater.value == 0) {
	feedback.push('heater');
}

// == 0 if everything went ok, which equals false
if (feedback.length) {
	var err = d.getElementById('feedback');
	err.innerHTML = '';
	err.appendChild(d.createTextNode('You must also select:'));
	err.appendChild(d.createElement('br');
	// another way to perform iteration than for (var i = 0; ...)
	for (fb in feedback) {
		err.appendChild(d.createTextNode(fb));
		err.appendChild(d.createElement('br');
	}
}
else {
	// ajax request using shape, size, heater
}
}

ca87;10963670 wrote:

I have never tried the error_log so i don't know how to use it. I currently use Netbeans IDE and its just gives hint out compile-time error only. However, firefox error_console did not output any error.

The error log exists on the server running PHP. Path and file are set in php.ini, and so is error reporting level. While developping you should have all errors and warnings turned on.
The use in this particular case is that if your PHP code fails to execute as it should, you may not get a response back to the client. But the error log will tell you what happens.
Firefox error console will only report client side errors, such as javascript and css errors.

[ca87]

johanafm;10963688 wrote:

Ah, to get those values, I suppose you can't (easily) send them as function arguments.

function showCostEstimate() {
	var d = document;	// just to save on typing
	var shapeDiv = d.getElementById('shape');

/* The div also contain br elements and textNodes, so we can't just
	cycle through shapeDiv's childNodes (without checking what they are).
	This is easier */
var radios = shapeDiv.getElementsByTagName('input');
var shape = false;
// Find out what shape was selected.
for (var i = 0; i < radios.length && shape == false; ++i) {
	if (radios[i].checked == true) {
		shape = radios[i].value;
	}
}

var size = d.getElementById('size').value;
var heater = d.getElementById('heater').value;

// input validation before sending request
var feedback = Array();
if (shape == false) {
	feedback.push('shape');
}
// Havn't seen what this will contain, but I'm assuming the same approach as for heaters
if (size.value == 0) {
	feedback.push('size');
}
if (heater.value == 0) {
	feedback.push('heater');
}

// == 0 if everything went ok, which equals false
if (feedback.length) {
	var err = d.getElementById('feedback');
	err.innerHTML = '';
	err.appendChild(d.createTextNode('You must also select:'));
	err.appendChild(d.createElement('br');
	// another way to perform iteration than for (var i = 0; ...)
	for (fb in feedback) {
		err.appendChild(d.createTextNode(fb));
		err.appendChild(d.createElement('br');
	}
}
else {
	// ajax request using shape, size, heater
}
}

Thank you very much Jo. i will work with what you've given me for now.

[ca87]

johanafm; wrote:

If you dislike the extra click for the user, you'd have to set onchange events for all controls (heater, size and shape) and in the event handler check if you have valid selections in each group. If not, send no request..

Morning Jo! That is the option i'd go for becos at this stage i want to suggest to the user an estimate cost (the php script?) of the selections (Shape, size and heater) they have made before they carry on to the next step

Ah, to get those values, I suppose you can't (easily) send them as function arguments.

but I need to place the costEstimate() function with the heater value (costEstimate(this.value) on the onchange event of the "Heater". How can i archieve this without an extra click button.

[johanafm]

ca87;10963787 wrote:

but I need to place the costEstimate() function with the heater value (costEstimate(this.value) on the onchange event of the "Heater". How can i archieve this without an extra click button.

In the exact same way as it's done with the click button. You still don't need the function argument.
But like I said before, if you do put it back in the heater onchange, I suggest you also place the exact same onchange event for your size and shape elements, since you don't know if the user actually will select shape and size before heater.
The other way to deal with this is to set display: none for heater until size has been selected, similarily to like you do not show sizes before the user selects a shape.

[ca87]

johanafm wrote:

function showCostEstimates() {
  var d = document;	// just to save on typing
  var shapeDiv = d.getElementById('shape');
  var radios = shapeDiv.getElementsByTagName('input');
  var shape = false;
    // Find out what shape was selected.
  for (var i = 0; i < radios.length && shape == false; ++i) {
      if (radios[i].checked == true) {
          shape = radios[i].value;
      }
  }
  var size = d.getElementById('size').value;
  var heater = d.getElementById('heater').value;

// input validation before sending request
  var feedback = Array();
  if (shape == false) {
      alert('Please select pool shape');
  }

  if (document.getElementById('heater').selectedIndex <= 0) {
      alert('Please select your heating type');
  }

// == 0 if everything went ok, which equals false
  if (feedback.length) {
      var err = d.getElementById('feedback');
      err.innerHTML = '';
      err.appendChild(d.createTextNode('You must also select:'));
      err.appendChild(d.createElement('br'));
        // another way to perform iteration than for (var i = 0; ...)
      for (fb in feedback) {
          err.appendChild(d.createTextNode(fb));
          err.appendChild(d.createElement('br'));
      }
  }
  if (document.getElementById('size').selectedIndex <= 0) {
      alert('Please select your pool size');
  }

  else {// ajax request using shape, size, heater
      var queryString = '?heater='+window.encodeURIComponent(heater)+'&Pool_Shape='+window.encodeURIComponent(shape)+'&size_In_Feets='+window.encodeURIComponent(size);
      loadXMLDoc("costEstimate.php?heater="+queryString,function(){
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
              alert(xmlhttp.responseText);
              document.getElementById('ElectricCost').style.display ='block';
          }
      });
   }
}

Hi Jo, just want to say a BIG Thank you for your help.

Right, above is a slightly modified version your code. My problem is the way the "costEstimate.php" files is displayed at the moment. Second to the last line of the code show the php file being displayed on a pop up/alert, whereas i which to display it on a customized web page using the code below

function openBrWindow(theURL) { //v2.0
  window.open(theURL,'scrollbars=yes,resizable=no,width=320,height=320');
}

//And then call the above function below
function showCostEstimates() {
......
else {// ajax request using shape, size, heater
         .......
          ......
              openBrWindow(xmlhttp.responseText);
              document.getElementById('ElectricCost').style.display ='block';
          }
      });
   }
}

but then that doesn't work. Can u please assist me with this? Thanks

[johanafm]

You are trying to

window.open('<?xml ...?><rootNode><someNode>...</someNode></rootNode>')

while window.open takes as its first parameter a URL, just like the function arguments hints at.

var w = window.open();
// create and start writing to a new document in window w (the newly opened one)
w.document.write('stuff');

// let the browser know that we are done writing to the document so it can stop showing the "load indicator".
w.document.close();

[ca87]

johanafm;10964353 wrote:

You are trying to

window.open('<?xml ...?><rootNode><someNode>...</someNode></rootNode>')

while window.open takes as its first parameter a URL, just like the function arguments hints at.

var w = window.open();
// create and start writing to a new document in window w (the newly opened one)
w.document.write('stuff');

// let the browser know that we are done writing to the document so it can stop showing the "load indicator".
w.document.close();

Great! Never new it was that simple? (i need to study more!)

Err... how do i make the size of the window? bcos i tried passing in the "Width and Height" parameters but it didn't open. any suggestion please?

[johanafm]

Mozilla has a good javascript reference. The "Gecko DOM reference" link deals with DOM stuff, and the core javascript reference deals with basic language features.
From Gecko DOM reference page, click the window link, then click window.open for argument list and function description, then scroll down a bit to see the list of supported features. Width and height are among them, and each window feature has a icons to show what browsers support them.

[ca87]

I want to say a BIG and special thanks to especially Johan and NogDog for the help rendered during this project. I was a completely an illustrate when it comes to web programming but the help and assistance they gave made this a reality. Good job guys and thanks for your precious time!