Multiple Select Menus + JScript

obrienkev

Hi all,

I want to enable the user to add as many select menus as is required. Each select menu should be populated with data from a database table.

The menus are created ok but I am unable to get the data into the select menus.

Any ideas?

$query = "SELECT FFNumber, FirstName, SurName, TDATE, EmpStatus ".
		"FROM EMPLOYEES_Registered";
$result = mysql_query($query) or die(mysql_error());

// DISPLAY LIST OF NAMES
if(isset($error_message['ffnumber'])) { echo  $error_message['ffnumber']; }
echo '<p id="qs"> '.
	 '<label for="ffnumber">Name:</label> '.
         '<select name="ffnumber" id="ffnumber"> '.
	 '<option value="0">Select Name</option>';

while($row = mysql_fetch_array($result))
{
/ SET NAME/FFNUMBER VARIABLE
$value = $row['FFNumber'].'-'.$row['SurName'].'-'.$row['FirstName'];
echo '<option value= "'.$value.'">'.$row['SurName'].' '.$row['FirstName'].'</option>';
}

echo '</select> '.
	'<button onclick="addStaff(); return false;">Add another</button></p>';
?>

JavaScript:

<script language="JavaScript" type="text/javascript">
<!--

var fieldCount = 1;
function addStaff() 
{
		fieldCount++;
		var newStaff = document.createElement('select');
		newStaff.name = 'ffnumber[]' + fieldCount;
		newStaff.id = 'ffnumber' + fieldCount;
		document.getElementById('qs').appendChild(newStaff);
}

//-->
</script>

obrienkev

Any ideas guys? Tried adding a option element to the javascript but didnt work. Still unable to get the data into the select menus.

JPnyc

You have to have option elements or there's nothing to populate.

obrienkev

How could I set up the option elements to contain the dynamic data? Will I have to use the sql query in the Javascript?

JPnyc

As long as you're doing this with PHP, you might as well do the query there, and echo the JS with the returned PHP variable concatenated in the output statement

obrienkev

OK this is my latest effort but not sure where its going. Any help please? Thanks.

Javascript Head:

<script language="JavaScript" type="text/javascript">
<!--

var fieldCount = 1;
function addStaff() 
{
		fieldCount++;
		var newStaff = document.createElement('select');
		newStaff.name = 'ffnumber[]' + fieldCount;
		newStaff.id = 'ffnumber' + fieldCount;
		document.getElementById('qs').appendChild(newStaff);
		  <?php
			include('../staff_db_connect.php');

		$query = "SELECT FFNumber, FirstName, SurName, TDATE, EmpStatus ".
		 	       "FROM EMPLOYEES_Registered ".
			 			 "WHERE EmpStatus = 'A' ".
			 			 "ORDER BY SurName ".
			 			 "ASC";
  $result = mysql_query($query) or die(mysql_error());

  while($row = mysql_fetch_array($result))
	{
		      // SET NAME/FFNUMBER VARIABLE
	        $value = $row['FFNumber'].'-'.$row['SurName'].'-'.$row['FirstName'];
					echo '<option value= "'.$value.'">'.$row['SurName'].' '.$row['FirstName'].'</option>';
  }

		?>
}

//-->
</script>

Body PHP Code:

			<?php
			/***********************
 			Get Staff Details
			***********************/
			include('../staff_db_connect.php');

		$query = "SELECT FFNumber, FirstName, SurName, TDATE, EmpStatus ".
		 	       "FROM EMPLOYEES_Registered ".
			 			 "WHERE EmpStatus = 'A' ".
			 			 "ORDER BY SurName ".
			 			 "ASC";
  $result = mysql_query($query) or die(mysql_error());

		// DISPLAY LIST OF NAMES
		if(isset($error_message['ffnumber'])) { echo  $error_message['ffnumber']; }
		echo '<p id="qs"> '.
				 '<label for="ffnumber">Name:</label> '.
       '<select name="ffnumber" id="ffnumber"> '.
	 			 '<option value="0">Select Name</option>';

  while($row = mysql_fetch_array($result))
	{
		      // SET NAME/FFNUMBER VARIABLE
	        $value = $row['FFNumber'].'-'.$row['SurName'].'-'.$row['FirstName'];
					echo '<option value= "'.$value.'">'.$row['SurName'].' '.$row['FirstName'].'</option>';
  }

		echo '</select> '.
				 '<button onclick="addStaff(); return false;">Add another</button></p>';
		?>

JPnyc

Do you want to do this dynamically on the fly without refreshing the page? IF you do, then AJAX might be what you need.

obrienkev

well I'm really looking for the simplest solution. I am using ajax to create multiple select menus. However, the menus are not populated with data from the database - they are blank.

What should I do? Grateful for your help. Thanks.

obrienkev

Thanks for your help.

Here's what I have now...

Javascript in Head Section...

<script language="JavaScript" type="text/javascript">
<!--

var fieldCount = 1;
function addStaff()
{
        fieldCount++;
        var newStaff = document.createElement('select');
        newStaff.name = 'ffnumber[]' + fieldCount;
        newStaff.id = 'ffnumber' + fieldCount;
        document.getElementById('qs').appendChild(newStaff);
        document.name.innerHTML = var my_options;
}

//-->
</script>

And the amended PHP Code...

            echo '<p id="qs"> '.
                  '<label for="ffnumber">Name:</label> '.
         '<select name="ffnumber[]" id="ffnumber"> '.
                      '<option value="0">Select Name</option>';

        $my_options = '';
 while($row = mysql_fetch_array($result))
     {
             // SET NAME/FFNUMBER VARIABLE
             $value = $row['FFNumber'].'-'.$row['SurName'].'-'.$row['FirstName'];
                     echo '<option value= "'.$value.'">'.$row['SurName'].' '.$row['FirstName'].'</option>';
                 $my_options .= '<option value= "'.$value.'">'.$row['SurName'].' '.$row['FirstName'].'</option>';
 }
        // output the value for javascript
        echo "<script> var my_options = '$my_options';</script>";

        echo '</select> '.
              '<button onclick="addStaff(); return false;">Add another</button></p>';

No result yet though. Anyone spot where I am going wrong? Thanks again.

Weedpacket

        document.name.innerHTML = var my_options;

So, my Javascript is none-too-spectacular, but doesn't this create a new (empty) variable called my_options and then assign its value to the document.name.innerHTML property? I just tried it in Firefox's Javascript console and it gave me a syntax error.

JPnyc

Yes, it's backward. I didn't notice it. Reverse whats on each side of the =

obrienkev

Did that but no difference. Is my code above structured correctly? Thanks.

JPnyc

Without seeing the whole page its very hard to say but this section can't be correct no matter what
newStaff.name = 'ffnumber[]' + fieldCount;
newStaff.id = 'ffnumber' + fieldCount;
document.getElementById('qs').appendChild(newStaff);

What do you expect to be output here? You realize JS does data conversions automatically, so if you concatenate a string with a number (you're passing ffnumber[] as a string literal) then the whole thing becomes string.

obrienkev

The select menu is displayed correctly. Only problem is how to get DB query results in the Option Values?

JPnyc

Well PHP isn't one of the languages I studied, but basically return your record set, put each field that you want displayed into a $variable and then contatenate that with the output (echo?) statements.

I still don't understand the requirements well enough. Is there a finite number of these dropdowns? Because if there is, you can populate them all just with PHP, and have them set to hidden in your css, then just show them with JS. That would be easy

obrienkev

ok that's interesting.
The dropdowns are populated from a database - so whatever number is in the database will be set as option values in the select menus.

How would I call them using Javascript? In CSS I would use display:none; ??

Thanks.

JPnyc

Right, display:none; so they all (or however many you wish) wouldn't show on load. Then with JS you use a statement like:

document.getElementsByTagName('select').style.display='block';

to make em visible. The getElementsByTagName method returns an object of all elements of that tag name