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

[Notgiven]

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.

 

[darwinist]

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

.id ;
if (tables

&& tables

.id)
{
id = tables

.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.

 

[RobG]

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>

 

[RobG]

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.

 

[darwinist]

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?

 

[RobG]

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.

 

[Michael Winter]

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

 

[darwinist]

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.

 

[Notgiven]

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!