SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to write a combo box selection to a text box?

    What Javascript code would I use in the code below to write a combo box selection into a textbox? AND THEN, if I selected a 2nd selection from the combo box, it would write that in the same text box right after the 1st selection (in other words, it wouldn't erase the 1st selection).

    Of course, there would need to be a single space to separate each sentence that gets written to the text box.

    Thanks!

    =================================

    <html>

    <select name="ComboBox">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    </select>

    <textarea name="TextBox"></textarea>

    </html>

    =================================

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    document.getElementsByName('ComboBox')[0].onchange = function () {
    	var textBox = this.form.elements['TextBox'];
    	textBox.value += this.options[this.selectedIndex].text + "\n";
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for your help. I put in the following code, but it didn't work for some reason. I'm pretty new to this, so I'm sure it's something simple.

    =========================

    <html>

    <SCRIPT language="JavaScript">
    document.getElementsByName('ComboBox')[0].onchange = function () {
    var TextBox = this.form.elements['TextBox'];
    TextBox.value += this.options[this.selectedIndex].text + "\n";
    }
    </SCRIPT>

    <select name="ComboBox">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    </select>

    <textarea name="TextBox"></textarea>

    </html>

    ==============================

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Yes, when the script runs it cannot access elements that do not yet exist. This applies to all of the page code below the script.

    Place the script at the end of the body, just before </body> or use some other method to run it after the page has loaded.

    Placing the script at the bottom is one of the recommended best practices for speeding up your web site.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried the code below but still nothing. Any clue what I'm doing wrong? Thanks...

    ========================

    <html>

    <body>

    <select name="ComboBox">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    </select>

    <textarea name="TextBox"></textarea>

    <SCRIPT language="JavaScript">
    document.getElementsByName('ComboBox')[0].onchange = function () {
    var TextBox = this.form.elements['TextBox'];
    TextBox.value += this.options[this.selectedIndex].text + "\n";
    }
    </SCRIPT>

    </body>

    </html>

    =================================

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You're using this.form but there is no form on the page.

    Surround the form elements with the form tag and you'll be fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it figured out now. Thanks for all your help Paul!


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
  •