newbie - how do I dynamically add a field value to a select box(and remove it)?

Discussion in 'Javascript' started by Notgiven, Aug 4, 2006.

  1. Notgiven

    Notgiven Guest

    I want the user to be able to enter some text (a date actually) and click a
    button. The button would cause the field value to be added to a static list
    of dates.

    I also need to be able to delete from that list as well. So I guess a list
    box would be the element of choice.

    I would then process those dates using an array in php.

    Any ideas or links on how to do this?

    Many thanks.
     
    Notgiven, Aug 4, 2006
    #1
    1. Advertising

  2. Notgiven

    darwinist Guest

    Notgiven wrote:
    > I want the user to be able to enter some text (a date actually) and click a
    > button. The button would cause the field value to be added to a static list
    > of dates.
    >
    > I also need to be able to delete from that list as well. So I guess a list
    > box would be the element of choice.
    >
    > I would then process those dates using an array in php.
    >
    > Any ideas or links on how to do this?
    >
    > Many thanks.


    Yes I do exactly this but with a list of open "windows" rather than a
    text input's value, (which is the .value property btw)
    (from http://darwinist.googlepages.com/htmldesktop.html)

    <script>
    // First, here's how you make and populate a list
    // (you could strip out the make part)
    function MakeWindowList(type) // show all windows on the navbox.
    {
    // Delete it if it's already there.
    if ($("WindowList"))
    {
    $del("WindowList");
    }
    else
    {
    var WindowList= $make("select","WindowList");
    var tables = document.getElementsByTagName('table');
    for (table in tables)
    {
    //id = tables[table].id ;
    if (tables[table] && tables[table].id)
    {
    id = tables[table].id
    // if there's an title of the right kind it's one of ours
    if ($(id+"_Title") && $(id+"_Title").tagName=="INPUT")
    {
    option = $make("option");
    option.value = id;
    PutIn($text($(id+"_Title").value), option);
    PutIn(option, WindowList);
    }
    }
    }

    WindowList.size = 10;
    WindowList.style.display = "block";
    if (type == "goto") WindowList.onclick =function()
    {GotoWindow(this, window.event);}
    else WindowList.onclick = function()
    {FetchWindow(this, window.event);}
    PutIn(WindowList, $("fetchbox"));
    }
    }

    // And here are how it does the things it does:
    function $make(type, id)
    {el = document.createElement(type);el.id=id;return el;}

    // delete an element from the document tree
    function $del(id)
    {$(id).parentNode.removeChild($(id));}

    function $text(text)
    { return document.createTextNode(text);} // Make a text node

    function PutIn(targetobject, newcontainer)
    {newcontainer.appendChild(targetobject);}

    // Get an object by id (22 keystrokes shorter
    // than document.getElementById)
    function $(id)
    {return document.getElementById(id);}

    </script>

    hope this helps.
     
    darwinist, Aug 5, 2006
    #2
    1. Advertising

  3. Notgiven

    RobG Guest

    Notgiven wrote:

    > I want the user to be able to enter some text (a date actually) and click a
    > button. The button would cause the field value to be added to a static list
    > of dates.
    >
    > I also need to be able to delete from that list as well. So I guess a list
    > box would be the element of choice.


    By 'list box' I guess you mean a select element.


    > I would then process those dates using an array in php.


    In order to send them to the server, you'll need to make the select a
    'select-multiple' and then make them all selected before sending the
    form (or put them into a hidden input).


    > Any ideas or links on how to do this?


    See below for an example - remember that a select element must always
    have at least one option, otherwise it is invalid HTML. Also, you can
    add value as well as text when creating the option - there are lots of
    examples in the archives of how to add options using new Option.


    <script type="text/javascript">

    function addOption(sel, txt){
    if (sel.options[0] && sel.options[0].text == ''){
    sel.removeChild(sel.options[0]);
    }
    sel.options[sel.options.length] = new Option(txt);
    }

    function deleteOption(sel){
    if (sel.selectedIndex >=0){
    var selectedOption = sel.options[sel.selectedIndex];
    sel.removeChild(selectedOption);
    }
    if (sel.options.length == 0){
    addOption(sel, '');
    }
    }

    </script>

    <form action=""><div>
    <input type="text" name="textDate">
    <input type="button" value="Add"
    onclick="addOption(this.form.xx, this.form.textDate.value);">
    <br>
    <select name="xx" size="10" style="width: 8em;">
    <option>
    </select>
    <input type="button" value="Remove selected"
    onclick="deleteOption(this.form.xx);
    ">
    </div>
    </form>


    --
    Rob
     
    RobG, Aug 5, 2006
    #3
  4. Notgiven

    RobG Guest

    darwinist wrote:
    [...]

    > option = $make("option");


    [...]

    > function $make(type, id)
    > {el = document.createElement(type);el.id=id;return el;}


    It is well known that IE does not correctly add options to a select
    element if they've been created using document.createElement - you must
    use new Option. Search the archives.


    --
    Rob
     
    RobG, Aug 5, 2006
    #4
  5. Notgiven

    darwinist Guest

    RobG wrote:
    > darwinist wrote:
    > [...]
    >
    > > option = $make("option");

    >
    > [...]
    >
    > > function $make(type, id)
    > > {el = document.createElement(type);el.id=id;return el;}

    >
    > It is well known that IE does not correctly add options to a select
    > element if they've been created using document.createElement - you must
    > use new Option. Search the archives.
    >


    I've never had problems, but I'll take your word for it. Can you create
    all elements this way?

    > --
    > Rob
     
    darwinist, Aug 6, 2006
    #5
  6. Notgiven

    RobG Guest

    Re: newbie - how do I dynamically add a field value to a select box(andremove it)?

    darwinist wrote:
    > RobG wrote:
    >> darwinist wrote:
    >> [...]
    >>
    >>> option = $make("option");

    >> [...]
    >>
    >>> function $make(type, id)
    >>> {el = document.createElement(type);el.id=id;return el;}

    >> It is well known that IE does not correctly add options to a select
    >> element if they've been created using document.createElement - you must
    >> use new Option. Search the archives.
    >>

    >
    > I've never had problems, but I'll take your word for it.


    Don't take my word for it - test it, search the archives.


    > Can you create all elements this way?


    No.


    --
    Rob
     
    RobG, Aug 6, 2006
    #6
  7. Re: newbie - how do I dynamically add a field value to a select box(andremove it)?

    On 05/08/2006 13:19, RobG wrote:

    [snip]

    > It is well known that IE does not correctly add options to a select
    > element if they've been created using document.createElement


    The problem is that if the text for that option is set by assigning to
    the text property of the option element, the text will not appear. The
    option element itself is still added.

    If the text is created as a text node and appended to the option
    element, IE displays the option correctly.

    > you must use new Option.


    The argument for using the DOM 0 Option constructor function is that it
    is supported by a wider range of browsers.

    Mike
     
    Michael Winter, Aug 7, 2006
    #7
  8. Notgiven

    darwinist Guest

    Michael Winter wrote:
    > On 05/08/2006 13:19, RobG wrote:
    >
    > [snip]
    >
    > > It is well known that IE does not correctly add options to a select
    > > element if they've been created using document.createElement

    >
    > The problem is that if the text for that option is set by assigning to
    > the text property of the option element, the text will not appear. The
    > option element itself is still added.
    >
    > If the text is created as a text node and appended to the option
    > element, IE displays the option correctly.


    Interesting. Thanks for the tip. Sorry if you're repeating yourself.
    Damn ie 6.

    > > you must use new Option.

    >
    > The argument for using the DOM 0 Option constructor function is that it
    > is supported by a wider range of browsers.
    >
    > Mike
     
    darwinist, Aug 7, 2006
    #8
  9. Notgiven

    Notgiven Guest

    "RobG" <> wrote in message
    news:...
    >
    > Notgiven wrote:
    >
    >> I want the user to be able to enter some text (a date actually) and click
    >> a
    >> button. The button would cause the field value to be added to a static
    >> list
    >> of dates.
    >>
    >> I also need to be able to delete from that list as well. So I guess a
    >> list
    >> box would be the element of choice.

    >
    > By 'list box' I guess you mean a select element.
    >
    >
    >> I would then process those dates using an array in php.

    >
    > In order to send them to the server, you'll need to make the select a
    > 'select-multiple' and then make them all selected before sending the
    > form (or put them into a hidden input).
    >
    >
    >> Any ideas or links on how to do this?

    >
    > See below for an example - remember that a select element must always
    > have at least one option, otherwise it is invalid HTML. Also, you can
    > add value as well as text when creating the option - there are lots of
    > examples in the archives of how to add options using new Option.
    >
    >
    > <script type="text/javascript">
    >
    > function addOption(sel, txt){
    > if (sel.options[0] && sel.options[0].text == ''){
    > sel.removeChild(sel.options[0]);
    > }
    > sel.options[sel.options.length] = new Option(txt);
    > }
    >
    > function deleteOption(sel){
    > if (sel.selectedIndex >=0){
    > var selectedOption = sel.options[sel.selectedIndex];
    > sel.removeChild(selectedOption);
    > }
    > if (sel.options.length == 0){
    > addOption(sel, '');
    > }
    > }
    >
    > </script>
    >
    > <form action=""><div>
    > <input type="text" name="textDate">
    > <input type="button" value="Add"
    > onclick="addOption(this.form.xx, this.form.textDate.value);">
    > <br>
    > <select name="xx" size="10" style="width: 8em;">
    > <option>
    > </select>
    > <input type="button" value="Remove selected"
    > onclick="deleteOption(this.form.xx);
    > ">
    > </div>
    > </form>
    > Rob


    This is EXACTLY whaty I was shooting for - thanks so much!
     
    Notgiven, Aug 7, 2006
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rocky
    Replies:
    0
    Views:
    282
    Rocky
    Nov 8, 2006
  2. palmiere
    Replies:
    1
    Views:
    466
    Erwin Moller
    Feb 9, 2004
  3. Replies:
    6
    Views:
    223
  4. jnag
    Replies:
    2
    Views:
    314
    Nick Fletcher
    Feb 27, 2008
  5. jr
    Replies:
    3
    Views:
    494
Loading...

Share This Page