Automatically Populating Another Field From A Dropdown

Hi All

I have built myself an invoicing system and I am in the midst of upgrading it.

Currently I have a dropdown box with all the items we sell in it and next to that a unit price text field.

Currently you select the item and them manually type in the price. The issue is you have to know the price.

What I want to do is once you choose an item it automatically adds the unit price.

I am sure this is easy and have a funny feeling I have done this years ago.

If anyone can point me in the right direction that would be great. An example or download code would be even better.

Many Thanks


In that case all you need to do is use DOM methods to get the value of each option, then use split() to get the part of the value after your nominated separator and use DOM methods again to write the appropriate value from the output of spilt() to another element.


From memory you can add several bits of information to the dropdown box and the JavaScript will recognise each part.


<option value=“Website Hosting::10”>Website Hosting</option>

The JavaScript looks for :: and separates it and then automatically propagates the next field with 10.

I am sure I have done something like this years ago but can’t remember where or how.

Any help would be great.


I don’t see where it will get the prce from to add automatically.

let :google: be your friend

If you google get select list value you will get plenty of examples on how to get the value of the selected option.

And the link I posted before shows you how to use split() to get just that part of the option value you want.

The script below will fill in your text box for you after selecting a product. The <option> value holds the unit price of the product selected.

If you want to store more than one thing in relation to the product selected, use an array holding all of the required info. The <option> value in this case could be the index number of the array.



<title>Unit Price</title>
<script type=“text/javascript”>
function getSelected(selectObj)
{ // check if invalid selection
if(selectObj.selectedIndex==0){ return; }
// ------------
// valid selection, so continue to write to text box
<style type=“text/css”>
#seL1 { position:absolute; top:100px; left:100px; text-align:left; }
#seL1 p { margin-top:0px; margin-bottom:3px; }

#txtBox1 { position:absolute; top:100px; left:220px; text-align:left; }
#txtBox1 p { margin-top:0px; margin-bottom:3px; }
.a14B { font-size:14px; font-weight:bold; }
.cnt { text-align:center; }


<form name=“form1” action>
<div id=“seL1”>
<p class=“a14B”>Product</p>
<p><select size=“1” onchange=“getSelected(this)”>
<option value=“0” selected>Select here</option>
<option value=“2.40”>Product 1</option>
<option value=“10.65”>Product 2</option>
<option value=“8.22”>Product 3</option>
<option value=“3.98”>Product 4</option>
<!-- end seL1 –>
<div id=“txtBox1”>
<p class=“a14B”>Unit Price</p>
<p><input class=“cnt” type=“text” name=“unitPrice” value size=“5”>
<!-- end txtBox –>
<!-- end form1 –>




I am not that great with JavaScript; do you know of some example code anywhere?