PDA

View Full Version : 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?:


<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
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


<!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


<!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


<!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>