SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Online Form: Select field with option to overwrite with custom entry

    I would like have a field that shows a set of pre-defined options to choose from, but also for the user to add their own entry if none of the options apply, i.e.

    - Option 1
    - Option 2
    - Option 3
    - Other (please specify)

    I have a look at using an input field with the new DATALIST. It's not quite ideal, because users don't see the full list of choices once they start typing. And they might not even realise that there are pre-defined choices.

    Any ideas? Many thanks.

  2. #2
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Kolkata
    Posts
    0
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Red face HTML + Javascript

    Quote Originally Posted by spirelli View Post
    I would like have a field that shows a set of pre-defined options to choose from, but also for the user to add their own entry if none of the options apply, i.e.

    - Option 1
    - Option 2
    - Option 3
    - Other (please specify)

    I have a look at using an input field with the new DATALIST. It's not quite ideal, because users don't see the full list of choices once they start typing. And they might not even realise that there are pre-defined choices.

    Any ideas? Many thanks.
    Hi, you can simply use HTML <OPTION> tags to generate your predefined list and have a "Other" option tag. When users click on other option tag, a text box will appear where users can specify their own. Lets look at the code.

    <select id="select1" onchange="check('select1','text1');">
    <option id="option1" value="option1">Volvo</option>
    <option id="option2" value="option2">Saab</option>
    <option id="option3" value="option3">Opel</option>
    <option id="option4" value="option4">Audi</option>
    <option id="option5" value="option5">Other</Option>
    </select>
    <input id="text1" type="text" value="Please Specify" style="display:none;"/>

    <script type="text/javascript">

    function check(select,text){
    var index = document.getElementById(select).selectedIndex;
    if(index==4){
    document.getElementById(text).style.display="block";
    } else {
    document.getElementById(text).style.display="none";
    }

    }

    </script>

    If you're looking for something else, please specify.
    Check out the following link to have a look on HTML option tag
    http://www.w3schools.com/tags/tag_option.asp

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Nice answer, @Rani Thakur . And welcome to the forums.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Agreed with Rani, I would use something like this before messing with datalist simply because of browser support (so you'd be using Javascript anyway).

    Only thing I'd add to Rani's code is, on the display:none input, I'd add aria-role=alert which in many (but not all yet) browsers will work to read the text of the input once it's become visible.

    When I made a datalist example a few years ago, in Opera if the user focussed on the input, the possibilities all showed. Later, in webkit you had to down-arrow, which would mean many users would have no idea there were pre-written options. At the time I don't believe anyone else supported it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •