Add Custom Item to Drop Down 1

madhouse · Nov 18, 2002

This question has probably been answered before somewhere i the forums but I can't seem to find it anywhere.

I have a form (frmNewPc) with a Drop Down list (cboHardDrives) where the values are populated from a table (tblHardDrives). What I want is for users to be able to add their own custom item to this Drop Down list so that the item is added to the table for other people to then be able to select.

krisbrixon · Nov 18, 2002

see if this helps:

http://www.tek-tips.com/gthreadminder.cfm/lev2/4/lev3/31/pid/333

Kris

madhouse · Nov 18, 2002

Kris - I clicked on that link but it just took me back to the Home Page???

krisbrixon · Nov 18, 2002

it did that for me too. oh well, here is a cut/paste of the important post. See if this helps any.

-------------------------------------------

Tarwn (Programmer) Nov 6, 2002
ACtually this can be done server-side with a text input and a button, to add the value entered in the text input as a new option in the select box and then make it the selected option:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addNewOption(txtName,selName){
var optionText;
eval("optionText = yourform."+txtName+".value&quot

;

var elem;
eval("elem = yourform."+selName);
elem.options[elem.options.length] = new Option(optionText,optionText);
elem.selectedIndex = elem.options.length - 1;
eval("yourform."+txtName+".value = '';&quot

;
}
//-->
</SCRIPT>
</head>
<body>
<form method=POST action="yourpage.asp" name="yourform">
<select name="selColor">
<option value=""> [Select Color] </option>
<option value="red"> Red </option>
<option value="blue"> Blue </option>
<option value="green"> Green </option>
</select>
<input type="button" value="<<" onClick="addNewOption('txtNewColor','selColor');">
<input type="text" name="txtNewColor">
</form>
</body>
</html>

Basically what this is doing is when the function is called you pass it the name of your input and the name of the select box you wish to add the value to. Then it creates a new option object in the options collection for the select box, assigning it to the bottom of the list. Since the index for the options starts at 0 we can assign the new object to the count of the option (elem.options.length) without being worried that it may already have a value, therefore this will work just as well if you are generating your options from ASP. Be forewarned, I just wrote this so it may have adverse side effects in some browsers, I meant it mainly just as an example.

-Tarwn
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

-------------------------------------------

Kris

Tarwn · Nov 18, 2002

One addition I should have made to the previous post the first time around was that on the next page you will need to detect whether this is a new option that needs to be added to your table or an old option that already exists in your database. In any caee, it may be easier to also have a hidden field that gets set when the user adds a new option to the table. Have it set some value like "newitem". That way on the next page that is going to do the db work, if the field is newitem than you would first insert the selected (new) option into the table that holds your hard drives table.
to make this a little more complicated you should also have a function that resets the hidden field to blank if they select another option and removes the new item from the list.

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Add Custom Item to Drop Down 1

madhouse

Programmer

krisbrixon

Programmer

madhouse

Programmer

krisbrixon

Programmer

Tarwn

Programmer

Similar threads

Part and Inventory Search

Sponsor