Inputting data into a drop-down list option

[dougmcc1]

I'd like to have a drop-down selection list with a blank first option that users can enter data into, and then selectable options below the blank one.

I know it cant be done with HTML alone but is there a way I can incorporate CSS or JavaScript to make it work? I'm thinking it might work if I position a regular input box on top of the drop-down select list if I make the regular input box just a long as the first blank drop-down option and accomodate for the length of the arrow.

Anyway, I'm going to give it a shot. I'll post the code if I get it to work. If anyone has a better idea please feel free to contribute. Thanks.

[dougmcc1]

My site has a fluid layout so I'm not able to do anything with positioning. Either the input textbox or the drop-down select list has to be positioned absoutely and they show up in different places on different sized monitors.

So I took another approach. The textbox is initially set as display: none and the "add new item" option on the drop-down select list has an onClick event which makes the drop down menu disappear and the textbox appear in its place when the option is clicked. It's not working yet but I know it's close. Any insight would be helpful. Here's my code so far:

<script type="text/javascript">
function displaytxtbox(x) {
var displaytxtbox="txtbox"+x;
var displaytxtbox=document.all(displaytxtbox);
displaytxtbox.style.display="";
}
function displaylist(x) {
var displaylist="list"+x;
var displaylist=document.all(displaylist);
displaylist.style.display="";
}
function removetxtbox(x) {
var removetxtbox="txtbox"+x;
var removetxtbox=document.all(removetxtbox);
removetxtbox.style.display="none";
}
function removelist(x) {
var removelist="list"+x;
var removelist=document.all(removelist);
removelist.style.display="none";
}
</script>

<input type="text" name="new_zip_code" size="4" id="txtbox1" style="display: none;">

<select name="zip_code" id="list1">
<option value="60601">60601</option>

<!-- hide list, show textbox -->

<option value="NEW" onClick="removelist(1);displaytxtbox(1);return true">NEW</option>
</select>

[dougmcc1]

This doesn't work either:

<form name="OrganizationForm">
<input type="text" name="new_zip_code" size="4" style="display: none;">

<select name="zip_code">
<option value="60601">60601</option>
<option value="77777">77777</option>

<!-- hide list, show textbox -->

<option value="NEW" onClick="document.OrganizationForm.zip_code.style.display='none'; document.OrganizationForm.new_zip_code.style.display='';">NEW</option>
</select>
</form>

[ergophobe]

I was working on a similar thing and found that the DOM pages on quirksmode.org were helpful, especially the page on editable text pages (pretty much what you want to do but instead of replacing a select box with an text input, it replaces a text paragraph with a textarea).

Because of the frame setup of that, rather than the URL, I will just say to go to quirksmode.org, look under DOM, and then under scripts.

Tom

[dougmcc1]

Thanks Tom, I did check that out but in lieu of all that complexity I'd opt to offer my users a static form. :)
And I think I'm just forgetting something silly that's causing my last 2 solutions not to work.

Mods, looks like this has turned into a JavaScript issue so feel free to move this thread to the appropriate forum.

[dougmcc1]

It works when I apply the event handler to the <select> tag like this:

<select name="zip_code" onChange="removelist(1);displaytxtbox(1);return true;">

Is there a rule against applying event handlers to <option> tags?

[dougmcc1]

Here is my working solution:

<script type="text/javascript"> 
function displaytxtbox(x)
{
var displaytxtbox="txtbox"+x;
var displaytxtbox=document.all(displaytxtbox);
displaytxtbox.style.display="";
}
function removelist(x)
{
var removelist="list"+x;
var useremovelist = removelist;
var removelist=document.all(removelist);
removelist.style.display="none";
}
function zipcode(a)
{
if (a == "NEW") { 
removelist(1);
displaytxtbox(1);
document.OrganizationForm.zip_code.value='';
}
}
</script>
<form name="OrganizationForm">
<input type="text" name="zip_code" size="4" id="txtbox1" style="display: none;">
<select name="choose_zip_code" id="list1" onChange="zipcode(this.form.choose_zip_code.value);return true;">
<option value="60601">60601</option>
<option value="77777">77777</option>
<option value="NEW">NEW</option>
</select>
</form>

If a user selects an existing zip code from the drop-down list, the selection just gets highlighted as normal. If they're zip code isn't listed and they click "NEW", the drop-down list disappears and a blank input box appears in it's place.