Dynamically populating HTML DropDown controls using AJAX and PHP.

Question

To dynamically fill DropDown controls on my HTML Form, I have written code that makes AJAX call to a .php file. This .php file populates the DropDown control with a single column value.

In this whole process, three files play the role.

(1) A HTML file that contains the entry form, (2) A .js file containing basic AJAX code, and (3) A .php file containing code to populate the DropDown control on my HTML form.

Below, I am giving the necessary code of all the three files respectively. The DropDown is not populating, therefore, I want to know the necessary corrections needed in the below given code.

Please note that the MakeRequest function in the .js file, accepts few arguments. These arguments are:

(1) HTML DropDown control name, (2) Entire Sql Query. (3) The ID column in a MySQL table. (4) The actual column whose values need to be populated in the DropDown control.

In this context, for example, I am referencing a MySQL table named: "ElectionCategoryMaster", that comprises of following columns:

(1) ecID Int P.K (2) ecName varchar

I am passing ID column as a argument so that I can retrieve this ID value when the user selects an ecName from the DropDown. This, ecID, will be stored in a different table.

[Code: HTML file]

<td onactivate="javascript: MakeRequest('inCategory','SELECT * FROM electioncategorymaster', 'ecid', 'ecname');">
    <select id="inCategory" name="inCategory" class="entryFormInputBoxColor">

    </select>
</td>

[Code: .js file] [AJAX]

function MakeRequest(DropDownName, SqlQuery, IdColumnName, DisplayColumnName)
{
  var xmlHttp = getXMLHttp();

  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
    }
  }
  xmlHttp.open("GET", "filldropdown.php?DropDownControlName = " + DropDownName + "&SqlQuery = " + SqlQuery + "&IdColumnName = " + IdColumnName + "&DisplayColumnName = " + DisplayColumnName, true);
  xmlHttp.send(null);
}

function HandleResponse(response)
{
  document.getElementById('ResponseDiv').innerHTML = response;
}

[Code: .php file] [To populate the desired DropDown control]

<?php

//Get values
$dropdownControlName = $_GET['DropDownControlName'];
$sqlQuery = $_GET['SqlQuery'];
$idColumnName = $_GET['IdColumnName'];
$displayColumnName = $_GET['DisplayColumnName'];
echo "dfddddf";
     dbconnection::OpenConnection();
     $result = dbaccess::GetRows($sqlQuery);
     // JavaScript code to populate the DropDown.
     echo "<select name='". $dropdownControlName ."'>";
     echo "<option>Select</option>";
     while($row=mysql_fetch_array($result))
     {
      echo "<option value=<?=". $row[$idColumnName] ."?>><?=". $row[$displayColumnName] ."?></option>";
     }
     echo "</select>";
     dbconnection::CloseConnection();
?>

Answer 1

I believe the javascript is the source of the problem. Let me explain: The function HandleResponse() always fills in the same ID. The variable DropDownName from your MakeRequest() function isn't passed anywhere to your HandlResponse() function. Try to add this argument, it should work better.

Apart from that, using MySQL queries directly inside your javascript is a big security issue.
1) You tell people the inner structure of your database.
2) People can modify this request to retrieve anything they want! FROM your database!

NEVER user directly user input (and yes, the GET argument CAN be user input: it's a simple GET variable, everyone has access to it).

Answer 2

I once used javascript to generate a query string, but was able to leave off many important details such as table name and WHERE conditions. I also made sure to use mysql_real_escape_string on it, adding strings to the front and back server side to make a complete query string. It was much easier than trying to post arrays. I feel that this was a safe and easier alternative.