devxlogo

Dynamically Insert Text Into a Text Box

Dynamically Insert Text Into a Text Box

Question:

How can I provide the user with a combo box and based on his selection populate the data in a text box? The data has to come from a back-end database. The catch is that the combo box and the text box are in the same form.

Answer:

You can do this easily with client-side JavaScript. First, get the data for the combo box and at the same time, get the corresponding data for the text box from your back-end database also. If possible, store the text data as the VALUE property of the combo box. Otherwise, store it in a client-side JavaScript array with an index matching the value property of the combo box item, or some other match. On the ONCHANGE event of the combo box, set the value of the textbox to the text data value. To get the value of the currently selected combo box, use this code:

// get selected indexvar i = document.formname.comboboxname.selectedIndex;// get value of selected indexvar v = document.formname.comboboxname.options[i].value;// set value to text boxdocument.formname.textboxname.value = v;

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist