Populate an existing DropDown list

alexia_net

Hi. I would like to know how can I select an existing drop down list from a form and populate it with the records from a database. I have written the code, but i do not know how to select the existing drop down list. It always creates a new one. This is the code I am using:

$str_sql = "SELECT ......";
$result = mysql_query($str_sql) or ($slq_str . mysql_error());
        echo " <select name = \"lstBuildings\" id=\"lstBuildings\">"; //this is the existing DDL (drop down list)
        while ($row = mysql_fetch_array($result)){
                echo "<option value = $row[field]>$row[field]</option>";
        }
        echo "</select>";
}

But it creates a new list instead of populating the existing one. The list is going to be populated after clicking a radio button. That's why i create it first and I populate it later. Thank you.

anakadote

When you echo "<select name = \"lstBuildings\" id=\"lstBuildings\">" it is creating a new select input. If you already have the input in your HTML, then you don't need to do that. Here's an example:

<select name="lstBuildings" id="lstBuildings">
<?php
   $str_sql = "SELECT ......";
   $result = mysql_query($str_sql) or ($slq_str . mysql_error());
   while ($row = mysql_fetch_array($result)){
?>
   <option value="<?php echo $row['field']; ?>"><?php echo $row['field']; ?></option>
<?php
   }
?>
</select>

RationalRabbit

This is an important question. How are you approaching populating this drop down?

If you were refreshing the page, then you would not have the problem you are describing. But if you are not, so I assume what you mean by "existing form" is that you are plugging an HTML form into a PHP page and wanting to populate it after the radio button is selected.

If I am interpreting this correctly, you would need to use JavaScript or, more likely Ajax. PHP comes before any action you can take on your form because it is server-side. It runs and writes the page according to the information it has at the moment the page is opened. In order to change that information, you need to go back to the server and rewrite (refresh) the page. (or use Ajax)

If I am misinterpreting, and your radio button is on another page, then write it as anakadote suggested, and you should be fine.

alexia_net

Hi RationalRabbit. You are right. All elements are on the same page. But is it possible to use sql statements in JavaScript? Thank you.

alexia_net

Hi.
All elements are on the same page. The page is a *.php page and I have the html script in it to create the form. I also use php script to do some tasks like calling the function which will populate the dropdown list.
Anakadoke, i have tried your solution but its the same thing, it creates a new list.
RationalRabbit, I am using Ajax and JavaScript to call a php function from a different file which will fill up the list. Must the list be filled using JavaScript code? Well how do I do that?
Thank you!

alexia_net

Any help is much appreciated. Thx.

johanafm

Assuming the php script called with ajax returns something like this

# SELECT value, text FROM tbl WHERE condition > $input
$output = array();
while ($row = mysqli->fetch_assoc($result)) {
	$output[] = $row;
}
echo json_encode($output);

Then your xmlhttprequest onchange event handler would look something like

xhr.onchange = function() {
	if (xhr.readystate == 4) {
		if (xhr.responseText) {
			// php output was a json_encoded array, so eval will turn it into an array
			var data = eval ('('+xhr.responseText+')');
			var d = document;
			var s = d.getElementById('your_select_element_id');
			// if you do not wish to append to it, but replace any current content...
				s.options.length = 0;
			// otherwise remove the above line

		for (var i = 0; i < data.length; ++i) {
			var o = d.createElement('option');
			o.value = data[i]['value'];
			o.appendChild(d.createTextNode(data[i]['text']));
			s.appendChild(o);
		}
	}
}
}

alexia_net

Hi. Thank you. I will give it a try and let you know.