Populate TextField based on DropDownList selection

[pelonms7]

Hello guys,

I want to fill a textfield based on a menu selection, for example the database has two fields agent_name and agent_number.

agent_name | agent_number

    Scott         |          1

    Dave         |          2

    Matt          |           3

I created a dropdown unsing Dreamweaver CS5, and I fill the values using a database (MySQL), there is a readonly text field called agent_number like the database field, basically I want to put the agent number based on the name selection, if you select Scott, this will autopopulate the number 1.

Can I do this automatically using dreamweaver? Or Do I need to do it using JavaScript?

Regards,

[Lon_Winters]

First, what is the purpose for this? There may be a better way to accomplish what you're trying to do.

As to your question, the cleanest way would be to use javascript to place the value of the list menu when triggered by the on-change event, or by a "Go" button.

A less elegant way would be to submit the form to the same page and retrieve the value of the selection, having set the text field to that variable. This would require a page reload and the Request code would need to be wrapped in an IF statement as the value would be null the first time the page loads.

[Günter_Schenk]

You might as well use the MySQL Concat() function to display the agent_number value for each list item, example:

<option value="1">Scott (ID: 1)</option>

Here´s a tutorial which explains how to modify your query accordingly

[pelonms7]

Thank you very much for your quick answer guys,

Basically there is a table called "agents" that one has the agent_name and agent_number; there is another table called "clients" and that table has the same fields "agent_number and agent_name", when you are adding a new "client" you need to select the agent for that "client" I created a dropdown who is going to show the Names of the agents, and I was trying to create a readonly field who it is going to show the client number.

Here is how it looks

http://lanacionalsa.com/aplicaciones/rutas/clientes/ingresar.php

I want to show the agent number based on the agent selection from the drop down.

Thanks in advance,

[Günter_Schenk]

pelonms7 wrote:

I want to show the agent number based on the agent selection from the drop down.

Well, if you really prefer a javascript based solution over achieving the same result with standard SQL methods, you can do it this way:

a) put this javascript function in the document HEAD:

<script type="text/javascript">

<!--

function transfer_agentid () {

for (var i=0;i<document.form.agente.options.length;i++)

if (document.form.agente.options.selected==true)

document.form.agente_numero.value=document.form.agente.options.value;

}

// -->

</script>

b) add an onchange event handler to the SELECT tag, example:

select name="agente" id="agente" onchange="transfer_agentid ()"

However I´d like to remind you that any javascript based approach is not reliable, because you don´t know whether some visitor will have javascript enabled in his/her browser.

[Lon_Winters]

I'm guessing the OP wants to write both the Agent name and Agent ID to the Clients table, that's why he wants the ID to display in the text field. If that's the case, then the data is populated into the text field (or a hidden field would work the same) and can be inserted into the DB when the form is submitted.

[Günter_Schenk]

Lon Winters wrote:

I'm guessing the OP wants to write both the Agent name and Agent ID to the Clients table, that's why he wants the ID to display in the text field.

Not sure if this is what the OP really wants, but even if, the Agent ID (aka the value of the selected menu item) will be stored in the table anyway.

or a hidden field would work the same

He wants to have the corresponding value displayed in a read-only text field. However a more elegant solution would be to...

a) create an empty DIV container using the same ID attribute, example:

<div id="agente_numero"></div>

b) modify the previously mentioned javascript function and change the DIV´s innerHTML property on the fly, example:

document.getElementById('agente_numero').innerHTML = "The selected Agent ID is " + document.form.agente.options.value;

This approach will make more sense anyway, because a browser with disabled javascript will simply do nothing at all (read: the DIV will remain empty) -- imagine how confused a visitor might be when the read-only field will not display any contents under these circumstances.