Results 1 to 5 of 5

Thread: Add Dropdown list value to a textbox

  1. #1
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Add Dropdown list value to a textbox

    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?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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/>
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Nile View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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>
    Last edited by codeexploiter; 02-06-2009 at 03:47 AM. Reason: corrections

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •