Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > newbie - how do I dynamically add a field value to a select box(and remove it)?

Reply
Thread Tools

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

 
 
Notgiven
Guest
Posts: n/a
 
      08-04-2006
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.


 
Reply With Quote
 
 
 
 
darwinist
Guest
Posts: n/a
 
      08-05-2006
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.

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      08-05-2006

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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-05-2006
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

 
Reply With Quote
 
darwinist
Guest
Posts: n/a
 
      08-06-2006
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


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-06-2006
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
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      08-07-2006
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
 
Reply With Quote
 
darwinist
Guest
Posts: n/a
 
      08-07-2006
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


 
Reply With Quote
 
Notgiven
Guest
Posts: n/a
 
      08-07-2006
"RobG" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
>
> 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!


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
javascript validation for a not required field, field is onlyrequired if another field has a value jr Javascript 3 07-08-2010 10:33 AM
Copy File Field Value to Dynamic File Field Value VUNETdotUS Javascript 25 11-10-2007 10:36 AM
Select box value changes value of hidden field dvwool@ix.netcom.com Javascript 6 04-27-2006 04:38 AM
If value in name field in top row disable submit button until add button is pressed or field is cleared. Chuck Javascript 0 11-10-2003 02:23 AM



Advertisments