Allow user to add own item if not already in drop down list

Colin Steadman · Oct 21, 2003

Is it possible to modify a dropdown list (specificially the dropdown
list I've copied below) so that a user could manually type in a value
of their own choosing; if they didn't want to select one of the
options provided. For example 'Lord' or 'Lady'. I've been asked to
do this in a form I'm setting up, but I cant see how or even if it
could be done.

The obvious answer would be to list all possibilities in the first
place. But they have their reasons and I'd prefer to give them what
they want.

TIA,

Colin

<html>
<head>
<title>Drop Down Test</title>
</head>
<body>

<P>
<select name="title" size="1" style="width: 204" tabindex="1">
<option value="Title">Select Title</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
<option value="Professor">Professor</option>
</select>
</P>

</body>
</html>

Steve Pugh · Oct 21, 2003

Is it possible to modify a dropdown list (specificially the dropdown
list I've copied below) so that a user could manually type in a value
of their own choosing; if they didn't want to select one of the
options provided. For example 'Lord' or 'Lady'. I've been asked to
do this in a form I'm setting up, but I cant see how or even if it
could be done.

Sure, include an 'other' option and an additional text input.

The server side script handling the form submission then needs to be
tweaked to use either the entry from the select element or if that is
set to other to use whatever is in the text input.

Steve

Michael Wilcox · Oct 21, 2003

Steve Pugh said:
Sure, include an 'other' option and an additional text input.

Or elminate the drop down list all together and allow them to choose thier
own title.

Colin Steadman · Oct 22, 2003

Sure, include an 'other' option and an additional text input.

The server side script handling the form submission then needs to be
tweaked to use either the entry from the select element or if that is
set to other to use whatever is in the text input.

I'm not with you, could you give an example?

I've had a play but all I end up with is a text field outside the dropdown.

TIA,

Colin

Steve Pugh · Oct 22, 2003

I'm not with you, could you give an example?

<select name="title" size="1" style="width: 204" tabindex="1">
<option value="Title">Select Title</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
<option value="Professor">Professor</option>
<option value="other">Other</option>
</select>
<input type="text" name="title-other">

Add styles, labels, etc. to suit.

I've had a play but all I end up with is a text field outside the dropdown.

And? What's wrong with that?

Steve

Michael Wilcox · Oct 22, 2003

Colin Steadman said:
Is it possible to modify a dropdown list (specificially the dropdown
list I've copied below) so that a user could manually type in a value
of their own choosing; if they didn't want to select one of the
options provided. For example 'Lord' or 'Lady'. I've been asked to
do this in a form I'm setting up, but I cant see how or even if it
could be done.

Why don't you have an input box where users can fill in their own title?
Wouldn't that be better than all this fuss?

Colin Steadman · Oct 27, 2003

I've had a play but all I end up with is a text field outside the dropdown.

And? What's wrong with that?

Steve

Technically nothing, but its only going to be used every once in a
blue moon and it looks odd on the form (see html below).

I could add it under the title field and make it the same length but
that would give it equal status with the other form elements which it
blatantly shouldn't have.

Colin

<html>
<head>
<title></title>
<style>
table.box {
background-color: #DDDDDD;
}

td.heading {
font-size: 11;
font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
color: #606060;
}

td.text {
font-size: 11;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
</style>
</head>
<body>

<table align="center" width="100%" valign="middle" height="80%"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table align="center" valign="middle" cellspacing="20"
cellpadding="0" border="0" class="box">
<tr>
<td>
<table align="center" border="0" cellpadding="2"
cellspacing="0">
<tr>
<td class="text">Please enter the general details
about this person.</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td class="text">Title</td>
<td class="text">&nbsp</td>
<td class="text">
<select name="title" size="1" style="width: 204"
tabindex="1">
<option value="Title">Select Title</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
<option value="Professor">Professor</option>
<option value="Lord">Lord</option>
<option value="Other">Other</option>
</select>
 
<input type="text" name="othertitle" size="10">
</td>
</tr>
<tr>
<td class="text">Forenames</td>
<td class="text">&nbsp</td>
<td class="text"><input type="text" name="forenames"
size="30" tabindex="2"></td>
</tr>
<tr>
<td class="text">Preferred Forename</td>
<td class="text">&nbsp</td>
<td class="text"><input type="text"
name="preferred_forename" size="30" tabindex="3"></td>
</tr>
<tr>
<td class="text">Surname</td>
<td class="text">&nbsp</td>
<td class="text"><input type="text" name="surname"
size="30" tabindex="4"></td>
</tr>
<tr>
<td class="text">National Insurance</td>
<td class="text">&nbsp</td>
<td class="text"><input type="text" name="ni" size="30"
tabindex="5"></td>
</tr>
<tr>
<td class="text">Job Title</td>
<td class="text">&nbsp</td>
<td class="text"><input type="text" name="jobtitle"
size="30" tabindex="6"></td>
</tr>
<tr>
<td class="text" colspan="3">&nbsp<input type="hidden"
name="origin" value="1"></td>
</tr>
<tr>
<td align="center" colspan="3"><input class="mini"
type="submit" style="width:48" name="gotopersonal" value="Next"
tabindex="7"> <button class="input" type="button"
style="width:48" name="cancel" value="Cancel"
Onclick="window.location.href = 'results.asp';"
tabindex="8">Cancel</button></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Steve Pugh · Oct 27, 2003

Technically nothing, but its only going to be used every once in a
blue moon and it looks odd on the form (see html below).

It only looks odd because you've forgotten to give it any sort of
label explaining what it is for. How are users to know whether they
should us it or not if you don't label it?

<tr>
<td class="text">Title</td>

This cell was 'empty' in every row of your table? Why bother including
it at all in that case? If it's for padding then use CSS.

<td class="text">&nbsp</td>
<td class="text">
<select name="title" size="1" style="width: 204"

204 what? Lengths in CSS must always have a unit unless they are zero.

tabindex="1">
<option value="Title">Select Title</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
<option value="Professor">Professor</option>
<option value="Lord">Lord</option>
<option value="Other">Other</option>
</select>
 
<input type="text" name="othertitle" size="10">
</td>
</tr>

You can of course use Javascript to set/unset the disabled attribute
on that text field when the corresponding option is selected. Just
make sure that this defaults to making the field usble when JS is off.

Steve

Toby A Inkster · Oct 27, 2003

Colin said:
<select name="title" size="1" style="width: 204" tabindex="1">
<option value="Title">Select Title</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
<option value="Professor">Professor</option>
<option value="Lord">Lord</option>
<option value="Other">Other</option>
</select>
 
<input type="text" name="othertitle" size="10">

Interesting you have 'Lord', but not 'Rev'. I would have thought there
would be far more Reverands out there than Lords.

A drop down list is probably most appropriate for what you have, but for
some other similar situations, the following is a solution:

<label><input type="radio" name="title" value="Mr"> Mr</label>
<label><input type="radio" name="title" value="Miss"> Miss</label>
<label><input type="radio" name="title" value="Mrs"> Mrs</label>
<label><input type="radio" name="title" value="Ms"> Ms</label>
<label><input type="radio" name="title" value="Dr"> Dr</label>
<label><input type="radio" name="title" value="Other"> Other</label>
<label>(Please specify: <input type="text" name="othertitle">)</label>

with appropriate styling.

Colin Steadman · Oct 27, 2003

I've had a play but all I end up with is a text field outside the dropdown.

It only looks odd because you've forgotten to give it any sort of
label explaining what it is for. How are users to know whether they
should us it or not if you don't label it?

Your right, a label would help. But IMO the text box would still look
hap-hazard stuck on the side, even with a label in place to identify
its purpose.

This cell was 'empty' in every row of your table? Why bother including
it at all in that case? If it's for padding then use CSS.

Good point. It was a quick and dirty fix because of my CSS
inexperience. After I've sent this post I'll research a correct CSS
solution.

204 what? Lengths in CSS must always have a unit unless they are zero.

I wasn't aware I had to specify. As mentioned above my CSS knowledge
is limited. I also use a text editor to write my HTML so I dont have
the benefit of a validator to pointpoint these types of errors. Trial
and error seems to miss this fine detail

)

I think its obvious I could do with a good CSS reference guide, can
you suggest any?

You can of course use Javascript to set/unset the disabled attribute
on that text field when the corresponding option is selected. Just
make sure that this defaults to making the field usble when JS is off.

I've decided to speak to the customer and suggest Michaels idea of
getting rid of the drop-down altogether, its obvious I cant do what I
originally wanted. If they insist then I'll come back to your
javascript idea as I quite like it, and to hell with the layout!

Thanks for your help.

Colin

Not sure why drop-down is not working.	2	Mar 24, 2024
Multi select options in a menu	1	Oct 30, 2022
drop down lists	5	Aug 1, 2006
HTML Select element: How to show drop-down list by clicking only once	5	Jun 12, 2008
popups on drop down menu	4	Jul 13, 2007
Multiple drop down boxes with same options	0	Nov 30, 2006
Multiple drop down boxes with same options	4	Nov 30, 2006
Dynamic drop down list	6	Aug 28, 2006

Allow user to add own item if not already in drop down list

Colin Steadman

Steve Pugh

Michael Wilcox

Colin Steadman

Steve Pugh

Michael Wilcox

Colin Steadman

Steve Pugh

Toby A Inkster

Colin Steadman

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads