Chained Select and Auto Fill

[brazil]

I am looking for a simple java script I can implement on a site that if a location is selected from a drop down then a list of names are provided depending on a selected location then when a name is selected form auto fills form fields with that person's contact information. Similar to a simple chained select

for example,

If location=somewhere(drop down list of places) AND
If names=people(drop down list of names at somewhere)
then: field3=somebody's phone number
and: field4=somebody's email address
or if names=somebody else's name
then field3=somebody else's phone number
and: field4=somebody else's email address
.....
etc.
etc.
end

[ApacheTech]

Where is the information stored? In a database? If so, it would be easier to set this up using a serverside language like ASP.NET or PHP.

Do you have any code we can work with, or an example of what you want it look like?

[brazil]

This is from a previous post.. essentially we'd like to add the chained select in the beginning to select location first then name, then autofill with that person's contact information.


<script type="text/javascript">
var nameSelect = function(name, el){
if(!el){ alert("Error: cannot find div."); return false; }
var select = document.createElement('select');
var number, email, first = true;
select.name = "name";
var b = select.options[select.length] = new Option("Choose a contact", "chose");
for(key in name){
select.options[select.length] = new Option(key, key);
}
var number = document.createElement('input');
number.type = "text";
number.name = "number";
var email = document.createElement('input');
email.type = "text";
email.name = "email";
select.onchange = function(){
if(first) { select.removeChild(select.options[0]); }
el.phone.value = names[select.value].phone;
el.email.value = names[select.value].email;
first = false;
};

document.getElementById('select').appendChild(select);
};
</script>

Here are the form fields:

<form method="post" action="http://gogreennmllc.com/cgi-bin/FormMail.pl" enctype="application/x-www-form-urlencoded" id="name_select">
<div>
<div class="text3">
<p>Name:<font color="red">*</font><br/></p>
<span id="select"></span>
<p>Phone:<font color="red">*</font><br />
<input id="phone" type="text" name="phone" value="" />
<br/></p>

<p>E-mail:<br />
<input id="email" type="text" name="email" value="" /><br/></p>
</form>

<script type="text/javascript">
var names = {
"John": {"phone": "12312341234", "email": "john.123@gmail.com"},
"Tedd": {"phone": "9879879876", "email": "tedd.987@gmail.com"},
"Bob": {"phone": "58198314871", "email": "bob.581@gmail.com"},
"Fred": {"phone": "5437279876", "email": "fred543@gmail.com"}
};
nameSelect(names, document.getElementById('name_select'))
</script>

[ApacheTech]

So, your locations and people are all just stored in javascript arrays? Or do you have a database/xml file to take the details you need? (This would be the preferred method).

Having the details in a separate file, such as a database or XML file means that the list can be edited without editing the source code of the page.

A database would be most beneficial for this. Set up the database as so:

tblLocations
location_id (AutoNumber)
location_name (Text)

tblContacts
contact_id (AutoNumber)
first_name (Text)
last_name (Text)
phone_number (Text)
email_address (Text)
location_id (Lookup: tblLocations.location_id)

Once you have your database set up, you can follow this turorial:

http://www.blueicestudios.com/chained-select-boxes-using-php-mysql-ajax/

To set up the chained select boxes.