Add Dropdown list value to a textbox

**Macca** · 02-04-2009, 07:14 PM

Hope someone out there can help me!

What I am working on is how I can add a value from a dropdown list to a text box. I want to add the value by clicking on a checkbox.

Is this possible through JavaScript?

**Nile** · 02-04-2009, 10:35 PM

Like this?:

Code:

<script type="text/javascript">
var $ = function(e){ return document.getElementById(e); }
var swap = function(val, el){
  $(el).value = val;
}
</script>
<select onchange="swap(this.value, 'change')">
  <option value="Dogs">Dogs</option>
  <option value="Cats">Cats</option>
  <option value="Tiger">Tiger</option>
</select>
<input type="text" id="change" style="color: #000" disabled/>

**jscheuer1** · 02-05-2009, 05:41 AM

Originally Posted by Nile

Code:

var $ = function(e){ return document.getElementById(e); }
var swap = function(val, el){
  $(el).value = val;
}

Looks like it would work, but why on earth define the variable $ for a one time use? If this code is used with any of the popular script libraries (like jQuery, prototype, mootools), it will either break them and any code that depends upon them, or this code will fail to work.

**Macca** · 02-05-2009, 02:26 PM

thanks. Been trying to get this to work for ages.

If I wanted to be more dynamic and be able to add more than one value from the list to the textbox and be able to type text into the textbox. Is this possible?

**codeexploiter** · 02-06-2009, 03:41 AM

Here is some of the different versions that will achieve the result you needs

#1

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>        
    </head>
    <body>
        <form name="f">
            <select onchange="this.parentNode.elements['change'].value += this.value + ' '">
            	<option value="">Select an option</option>
                <option value="Dogs">Dogs</option>
                <option value="Cats">Cats</option>
                <option value="Tiger">Tiger</option>
            </select>
            <input type="text" name="change" style="color: #000" value=""/>
        </form>
    </body>
</html>

#2

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>        
    </head>
    <body>
        <form name="f">
            <select onchange="insertValue(this.value,this.parentNode.elements['change']);">
            	<option value="">Select an option</option>
                <option value="Dogs">Dogs</option>
                <option value="Cats">Cats</option>
                <option value="Tiger">Tiger</option>
            </select>
            <input type="text" name="change" style="color: #000" value=""/>
        </form>
		<script type="text/javascript">
        	function insertValue(value,el){
				el.value += value + ' ';
			}        
        </script>
    </body>
</html>

#3

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>        
    </head>
    <body>
        <form name="f">
            <select name='sel'>
            	<option value="">Select an option</option>
                <option value="Dogs">Dogs</option>
                <option value="Cats">Cats</option>
                <option value="Tiger">Tiger</option>
            </select>
            <input type="text" name="change" style="color: #000" value=""/>			
        </form>
		<script type="text/javascript">
			document.forms['f'].elements['sel'].onchange = function(){
				document.forms['f'].elements['change'].value += this.value + ' ';				
			};        	       
        </script>
    </body>
</html>

Thread: Add Dropdown list value to a textbox

Thread Tools

Search Thread

Add Dropdown list value to a textbox

Bookmarks

Bookmarks

Posting Permissions