SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding a value to a select array

    Hi, I want to add an option value to the end of a select array if the select option "New Category" is selected. The new option name would be gathered through a prompt. Here is what I have so far, and I am stuck on what to do next.

    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <script language="javascript">
    function cats() {
     var catName = prompt('Please enter category name:','');
     var category = document.test.cats;
    }
    </script>
    </head>
    
    <body>
    
    <form name="test">
     <select name="cats">
      <option value="general">General</option>
      <option value="community">Community</option>
      <option value="new" onSelect="cats();">New category</option>
     </select>
    </form>
    
    </body>
    </html>
    So, when "new" is selected, a prompt appears, and the value of the prompt is inserted into the end of the select options, and becomes selected. Thanks in advance!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Don't give your functions the same name as your form elements. Thanks to the interesting behaviour of IE to place all named form elements in the global namespace this will lead to conflicts.
    2. Don't use event handlers for option elements. In theory this should work but it is problematic.

    Here is a demo, should be working in all modern browsers.
    Code:
    <html><head><title>Test</title>
    <script type="text/javascript">
    function xcats(select) {
     if (select.value != "new") return;
     var catName = prompt('Please enter category name:','');
     if (!catName) return;
     var newOption = document.createElement("option");
     newOption.value = catName;
     newOption.appendChild(document.createTextNode(catName));
     select.insertBefore(newOption, select.lastChild);
     select.selectedIndex = select.options.length-2;
    }
    </script></head><body>
    <form name="test">
     <select name="cats" onchange="xcats(this)">
      <option value="general">General</option>
      <option value="community">Community</option>
      <option value="new"">New category</option>
     </select>
    </form></body></html>

  3. #3
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


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
  •