dynamic text fields from drop down menu selection 1

[LesSjo]

I need a way to have 6 text field populate dynamically from the user selection of a drop down menu value. I have seen a number of threads about this, but they are not working for me.

I have a drop down menu that is dynamically filled with the company names from a mySQL database. (this works)
What I need is for the text fields (description, address, city, state, zip, phone) to fill with the information linked to the drop down selection.


This is what I have so far...

<?php
... 
mysql_select_db($database_connection, $connection);
$query_franchises = "SELECT company, description, address, city, state, zip, phone FROM Franchise ORDER BY id ASC";
$franchises = mysql_query($query_franchises, $connection) or die(mysql_error());
$row_franchises = mysql_fetch_assoc($franchises);
$totalRows_franchises = mysql_num_rows($franchises);
?>
...
<script type="text/javascript">
function selectCompany(selObj) {
var companyArray[<?php $row_franchises['description']; ?>, 
				 <?php $row_franchises['address']; ?>, 
				 <?php $row_franchises['city']; ?>, 
				 <?php $row_franchises['state']; ?>, 
				 <?php $row_franchises['zip']; ?>, 
				 <?php $row_franchises['phone']; ?>];
var id = selObj.options[selObj.selectedIndex].value;
document.getElementById('description').value = companyArray[id][0];
document.getElementById('address').value = companyArray[id][1];
document.getElementById('city').value = companyArray[id][2];
document.getElementById('state').value = companyArray[id][3];
document.getElementById('zip').value = companyArray[id][4];
document.getElementById('telephone').value = companyArray[id][5];
}
</script>
...
<select name="franchise" id="franchise" onchange="selectCompany(this)">
	<?php do 
	{  ?>
		<option value="<?php echo $row_franchises['company']?>"
			<?php if (!(strcmp($row_franchises['company'], $row_franchises['company']))) 
			{echo "selected=\"selected\"";} ?>><?php echo $row_franchises['company']?></option>
	<?php } 
		while ($row_franchises = mysql_fetch_assoc($franchises));
  		$rows = mysql_num_rows($franchises);
  		if($rows > 0) {
      		mysql_data_seek($franchises, 0);
	  		$row_franchises = mysql_fetch_assoc($franchises);
  		}
	?>
</select>
...
	<tr>
    	<td><input name="description" type="text" id="description" value=""></td>
  	</tr>
  	<tr>
    	<td><input name="address" type="text" id="address" value=""></td>
  	</tr>
  	<tr>
    	<td><input name="city" type="text" id="city" value=""></td>
  	</tr>
  	<tr>
    	<td><input name="state" type="text" id="state" value=""></td>
  	</tr>
  	<tr>
  		<td><input name="zip" type="text" id="zip" value=""></td>
  	</tr>
  	<tr>
    	<td><input name="telephone" type="text" id="telephone" value=""></td>
	</tr>
...

Any help would be greatly appreciated.

Thanks,
Lester

 

[vicvirk]

^ what does the HTML output of your select box look like? View the source of the page and provide the actual select drop down not the dynamic version, please...


--------

GOOGLE is a great resource to find answers to questions like "how do i..."

http://www.google.com/webhp?complete=1&hl=en

--------

 

[LesSjo]

Here is the clean copy from view source

	    <td>Select Your Company</td>
	    <td td><select name="franchise" id="franchise" onchange="selectCompany(this)">
	      	      <option value="Alpha Company"selected="selected">Alpha Company</option>
	      	      <option value="Bravo Company"selected="selected">Bravo Company</option>
	      	      <option value="Charlie Company"selected="selected">Charlie Company</option>
	      	      <option value="Delta Company"selected="selected">Delta Company</option>
	              </select></td>

Thanks,
Lester

 

[vacunita]

You are on the right path. But you need to fix your JS array creation in PHP because as it stands there's no way to identify the data that belongs to a specific company.

Once the JS array is done it should look something like this:

var companyArray=new Array();

companyArray.CompanyAlpha=new Array();
companyArray.CompanyAlpha.description='Desription For CompanyAlpha';
companyArray.CompanyAlpha.address='Address For Company Alpha';
...
companyArray.CompanyBravo=New Array();
companyArray.CompanyBravo.description='Description for Company Bravo';
companyArray.CompanyBravo.address='Address For Company Bravo';
...

With that you can use the value obtained from the dropdown to access he JS array and get the relevant information from it for the selected company.



In PHP you would need to do something like:

var companyArray=new Array();
companyArray.<?PHP echo $row['company']; ?> = new Array();
companyArray.<?PHP echo $row['company']; ?>.description=<?PHP echo $row['description']; ?>
companyArray.<?PHP echo $row['company']; ?>.address=<?PHP echo $row['address']; ?>

...

This will let PHP construct a JS array that can then be accessed correctly.
Of Note is that if you want to use the Company name as an identifier it cannot have spaces in it. If you your company names have spaces then you'll need to choose a different identifier likely the ID of the company from the DB.

With the array constructed its just a matter of accessing with the correct company name when needed.

document.getElementById('description').value = companyArray[id]['description'];
document.getElementById('address').value = companyArray[id]['address'];
document.getElementById('city').value = companyArray[id]['city'];

...

You could of course use numbers instead of names when constructing the JS array, and then instead of accessing companyArray[id]['description'] it can be done as you have it: companyArray[id][0];





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[LesSjo]

Quick question. You state:

Once the JS array is done it should look something like this:

CODE
var companyArray=new Array();

companyArray.CompanyAlpha=new Array();
companyArray.CompanyAlpha.description='Desription For CompanyAlpha';
companyArray.CompanyAlpha.address='Address For Company Alpha';
...
companyArray.CompanyBravo=New Array();
companyArray.CompanyBravo.description='Description for Company Bravo';
companyArray.CompanyBravo.address='Address For Company Bravo';
...

I have over 100 companies in this db. Do I need to hard code it as you have it here? or is this done through php?

Thanks,
Lester

 

[vacunita]

PHP does it as per my second piece of code:

var companyArray=new Array();
companyArray.<?PHP echo $row['company']; ?> = [red]new Array();[/red]
companyArray.<?PHP echo $row['company']; ?>.description=<?PHP echo $row['description']; ?>
companyArray.<?PHP echo $row['company']; ?>.address=<?PHP echo $row['address']; ?>

...

Consider of course that having that much information dumped into your page is going to significantly affect performance.

You should look into AJAX if you are working with that much information.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[LesSjo]

I am still wet behind the ears where AJAX is concerned. How would I get started?

Thanks,
Lester

 

[vacunita]

I'm no Ajax expert myself, but the guys over at forum1600 will be happy to help you out.

All you'll likely end up doing is moving your PHP DB code to another file, and call it via ajax when necessary to populate the text boxes, very similarly to how you would be doing it now, except your page won't have hundreds of rows of your DB's information just sitting there.

Instead it will call the Db when it needs to and generate a single row of information for the relevant Company.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vicvirk]

http://www.w3schools.com/Ajax/Default.Asp

Is a great tutorial, as long as you do it honestly and don't skip over things to get to the spots you find most interesting, it should be enough to get you going.

Start on page 1, read everything and go through the examples. They have a section on PHP Ajax as well, but learn it step-by-step. Start with the basics and work your way up.

Shouldn't take more than an hour - and hour/half (which is probably less time than you'll spend hacking out a solution without the knowledge)

Good Luck!




--------

GOOGLE is a great resource to find answers to questions like "how do i..."

http://www.google.com/webhp?complete=1&hl=en

--------

 

[LesSjo]

I appreciate the input. I will work on it in the morning.

Thanks,
Lester