Webmaster Forum / ColdFusion / General CF Topics / August 2008

There are hundred and one ways of doing this, which one do you prefer?

Explore client side vs. server side adding first...

The most seemless way for users who have javascript turned on in their
browsers is to make another option which
<option value="new">[Add New]</option>

Then you'll need to add an event handler to your select box
onchange="testnew(this)"

Then you'll need a javascript function which tests your select box for
if its selectedValue is new.  If the value is new then you'll want to
display a text field input.  If not then you'll want to be sure your
text field is turned off.  Either disabled or invisible altogether is
good.  The easiest thing to do is just put the text field on the page
already and have it disabled and use the script to remove the disabled
flag.

That should cover creating the text field on the screen and giving the
user a place to do input.  The next step is in your submission to the
server you need to check if the value is new.  If it is then you'll
probably want to run a special insert to put that in the table.  Once
its in the table you'll need to pull back it's ID so you can use it in
your regular insert.  Then its just a matter of doing the regular
insert.

Your other option is to go all server side.  Then you'd want some sort
of second page that checks for the new option and if its new poses the
question to the user as to what the new one is.  Thats less convenient
because its out of step with when the user is selecting the new fruit
as the option.  Plus it requires page changes.

Nick

you manually add the option...

But then your options will be out of order.

I would suggest updating your database/list/etc

<cfselect name="mySelect">
    <option value="Blueberry">Blueberry</option>
    <option value="Strawberry">Strawberry</option>
    <cfoutput query="myQuery">
        <option value="#fruit#">#fruit#</option>
    </cfoutput>
</cfselect>

Hi,
You have to combine a edit-field where customers can enter new values, and a
list-field with the existing values from the database.
When the page gets submitted, you just query if the submitted value in the
edit-field already exists in the db-table and use the PK for that value, or add
it to the db-table and find the PK for your new value.

cheers,
  fober

===== EXAMPLE =====

<div style="width:200px; padding-right: 20px; border: 1px solid red">
    <select id="text_select" size="5"

        onchange="document.getElementById('text_edit').value=this[this.selectedIndex].
text; this.style.display= 'none'"
        style="display:none; z-index:99; position:absolute; width:100%"
    >
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
    </select>
    <input name="xyz" id="text_edit" type="Text" style="width:100%">
    <input type="Button" value="\/"
        onclick="document.getElementById('text_select').style.display= 'inline'"
        style="position:absolute; float:right;"
    >
</div>