Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Adding a value from an inputbox into combo box

    Hello,

    I need your guys help,

    Using javascript,

    What i'd like to do is when I type a value into the inputbox and I hit my enter key (in the textbox only) i'd like to have the value of the inputbox be added into the drop down box.

    Note that if there is an existing value in the already in the drop down box, the next value should just be added below the existing value.

    How do I set this up?

    Here is the html setup:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <input type="text" id="theinput" style="width: 100px;">
    
    <select id="thebox" style="width: 100px;"></select>
    
    </body>
    
    </html>
    Much thanks and appreciation for all your help and support.

    Cheers,

    Jay

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Google "javascript new option" (and be sure to use the additional search tools to specify "within last year").

    UPDATE: This tutorial is helpful.
    Last edited by WolfShade; 01-24-2013 at 05:18 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    jason_kelly (01-24-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Here you are:-

    Code:
    <form id = "myform">
    <input type = "text" onblur = "addOption(this.value)">
    
    <select name = "listBox1" id = "listBox1">
    <option value = "">First Value If Desired</option>
    </select>
    </form>
    
    <script type = "text/javascript">
    
    function addOption(txt) {
    var s = document.getElementById('listBox1');
    var opt = new Option(txt);
    
    for (var i = 0; i<s.options.length; i++) {
    var xtext = document.getElementById("myform").listBox1[i].text; 
    if (txt == xtext) {
    alert ("You have already added this value to the select box")
    return false;
    }
    }
    s.options[s.options.length] = opt;
    return true;
    } 
    
    </script>
    You should know that the default behaviour of hitting the Enter key is to transfer the focus to the next following field.


    Samson slayed the Philistines with the axe of the apostles
    - Pupil's answer to Catholic Elementary School test.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (01-24-2013)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thanks very much Phil.

    Flawless

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Note that a select list is NOT a combo box. With a combo box the person doesn't have to select a value from the list, they can type in their own value instead. Combo boxes are available in HTML 5.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    I've been preaching "<select> is not a combo box" for at least 14 years. It hasn't helped. And of course now that HTML 5 really has combo boxes, we'll never manage to get people to keep them straight.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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