Dropdown list populates form fields called from database

[cmckeef]

I am at a loss...I am still too new to coding to figure out how to accomplish the task below.

I have a dropdown list that is populated from a mysql database. My code works great - I add new entries to my database table using a form, a dropdown list on another page shows the new additions. Works fantastic!

My issue and end game...
I want to connect that dropdown list to input values in a form, that change as the dropdown list selection changes. So on the client-side, when someone wants to see the email and phone for "name" - when he/she selects the name from the dropdown list, the email and phone are populated in the email and phone form fields below.

Background...
Right now, I have two forms - a new addition form, and an update form. The new addition form is fairly self explanatory - it inputs fields into a table on my database - works fine. The update form is for review and updating. This is where the dropdown list comes into play. My update form works perfectly, when I have a cached entry up, I modify the values and the database table updates. I just can't seem to figure out how to populate it using the actual dropdown list - so I can choose another entry, and the values displayed in the form below change.

I have scoured over A LOT of code and I may be needing an onChange JS event, but I'm not proficient enough to really know. I definitely need some help!

Thank you,
Caleb

[Krik]

You are going to want to use Javascript, and the onchange event handler will be what you need to use.

But first we need to discuss how the data is made available to Javascript. If you are dealing with thousands of names you would likely find the AJAX (javascript technique) best. But if you had that many names a simple "select" field would be impractical, so I am going to assume its not that many names.

So as you only need 2 other pieces of data you could use custom attributes. These were introduced in HTML 5 but they work in HTML 4 as well.

<select id="myfield" name="myselectfield" onchange="ShowData(this.options[this.selectedIndex])">
    <option value="Joe" data-phone="123-456-7890" data-email="[e-mail]">Joe</option>
</select>

<input type="text" id="phone" name="phone" value="" />

<input type="text" id="email" name="email" value="" />

Note the "data-phone" and "data-email" attribute in the option element. These attributes are not defined in HTML and so it HTML will ignore them. But you can use javascript to display them in the input fields when that option is selected.

<script>
funciton ShowData(obj)
{
    document.getElementById('phone').value = obj.getAttribute('data-phone');
    document.getElementById('email').value = obj.getAttribute('data-email');
}
</script>

That is the basics of how to do it. I have used this technique in much more advanced web applications so you can expand it to do a lot more depending on what you need.

[cmckeef]

I think I may be missing something. I took the code you provided and when "Joe" was selected, nothing populated the input fields.

I'm sorry, I have tried and retested so many different options over the past week, I've driven myself a little crazy.