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

Discussion in 'HTML' started by Colin Steadman, Oct 21, 2003.

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


    ---------------------------------------------------------------
    To email, replace the word google with anything else you fancy.
    Colin Steadman, Oct 21, 2003
    #1
    1. Advertising

  2. Colin Steadman

    Steve Pugh Guest

    (Colin Steadman) wrote:

    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Oct 21, 2003
    #2
    1. Advertising

  3. Steve Pugh <> wrote:
    > 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.
    --
    Michael Wilcox
    mjwilco at yahoo dot com
    Michael Wilcox, Oct 21, 2003
    #3
  4. >
    > 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
    Colin Steadman, Oct 22, 2003
    #4
  5. Colin Steadman

    Steve Pugh Guest

    (Colin Steadman) wrote:

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


    <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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Oct 22, 2003
    #5
  6. Colin Steadman <> wrote:
    > 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?
    --
    Michael Wilcox
    mjwilco at yahoo dot com
    Michael Wilcox, Oct 22, 2003
    #6
  7. > >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">&nbsp;</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>
    &nbsp;
    <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">&nbsp;<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>
    Colin Steadman, Oct 27, 2003
    #7
  8. Colin Steadman

    Steve Pugh Guest

    (Colin Steadman) wrote:

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

    >>
    >> And? What's wrong with that?
    >>

    >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>
    > &nbsp;
    > <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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Oct 27, 2003
    #8
  9. Colin Steadman wrote:
    > <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>
    > &nbsp;
    > <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">&nbsp;Mr</label>
    <label><input type="radio" name="title" value="Miss">&nbsp;Miss</label>
    <label><input type="radio" name="title" value="Mrs">&nbsp;Mrs</label>
    <label><input type="radio" name="title" value="Ms">&nbsp;Ms</label>
    <label><input type="radio" name="title" value="Dr">&nbsp;Dr</label>
    <label><input type="radio" name="title" value="Other">&nbsp;Other</label>
    <label>(Please specify: <input type="text" name="othertitle">)</label>

    with appropriate styling.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 27, 2003
    #9
  10. > >> >I've had a play but all I end up with is a text field outside the dropdown.
    > >>
    > >> And? What's wrong with that?
    > >>

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



    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.


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



    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.


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



    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 :eek:)

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


    >
    > >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>
    > > &nbsp;
    > > <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.
    >



    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
    Colin Steadman, Oct 27, 2003
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wong CS
    Replies:
    0
    Views:
    518
    Wong CS
    Jan 30, 2005
  2. Dica
    Replies:
    4
    Views:
    732
  3. weiwei
    Replies:
    0
    Views:
    1,014
    weiwei
    Jan 5, 2007
  4. stephg

    Web User Control Drop Down List does not show selected item

    stephg, Oct 27, 2005, in forum: ASP .Net Building Controls
    Replies:
    3
    Views:
    352
    Ken Dopierala Jr.
    Oct 30, 2005
  5. Replies:
    5
    Views:
    267
Loading...

Share This Page