View Full Version : select drop down list does not drop down when called through ajax request

10-19-2008, 09:59 PM
Hi, I am creating this scenario where when a form opens I want a select drop down list to open within a div. i call a function that calls the server side script to retrieve the select options for mysql db. Then i use ajax responseText to call the php response. I created all the code for this, and the select drop down list appears. However, when I clicks on the drop down to select an option, the drop down list immediately closes as soon as I release my mouse button. The drop down list does not stay open.

I am not sure what this problem is:

here is my code:


/* This is the ajax request function used to create
a request object based on the browser */

function getHTTPObject() {
var xhr = null ;
try {
xhr = new XMLHttpRequest() ;
} catch(e) {
// standards request failed - try ie
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// both attempts failed
xhr = null ;
return xhr ;
function display_course_name()
courseReq = getHTTPObject();
if(courseReq == null)
alert("Your browser does not support AJAX!");
var url="cData.php";
courseReq.onreadystatechange=function() {
if (courseReq.readyState==4 || courseReq.readyState=="complete") {


this is where I call the ajax function:

<form action="sessionFormSubmit.php" onclick="display_course_name()" onsubmit="training_sec_id();" name="sessionForm" method="post" id="sessionForm">

this is my php server side script:

//fetch course name and course instructor for courses table and display as options
//use '<<' as delimiter.
$result = @mysql_query('SELECT DISTINCT courseName FROM courses WHERE courseName != "" ');
if (!$result) {
exit('<p>Error performing query: ' . mysql_error() .
echo'<p><label>* Course Name</label> <select name="training" id="training" onclick="display_course_instructor(this.value);">';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' .$row['courseName']. '">' . $row['courseName'] . '</option>';
echo'</select><span>&nbsp;&nbsp;Choose a Course</span></p>';

any help would be much appreciated!! Thanks!

10-20-2008, 03:48 PM
You should use onchange or onblur and not onclick with the select element.