SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    combobox and free text in one?

    In visual basic applications I have used comboboxes many times where you could either pick something from an offered list or type your own text into the field.

    Is this available in an html form? I have seen multiselect, but I don't know if you can make the value something OTHER than one of the provided options in an html form.

    My usage would be to display all the existing answers to a field in a database so they can pick it directly to avoid typos, but I don't want to eliminate the possibility of having a new answer. I am hoping to avoid selecting 'other' from a list and then typing in the other response in an adjacent text field. That's a workaround if I need to at least.

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can with Web Forms 2.0 (draft):
    HTML Code:
    <input name="answer" list="answers">
    <datalist id="answers">
     <option value="Foo">
     <option value="Bar">
    </datalist>
    This already works in Opera 9. See the spec examples for how to implement it if you want it to degrade nicely in other browsers.
    Simon Pieters

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, if you prefer to think in the here and now instead of burning time on solutions 99&#37; of the public has zero access to and is unlikely to within the next five years, you could 'fake it' by layering elements over each-other. You put the one you can type into on top, the select below it but just a bit wider so the dropdown select shows, and then use javascript to copy the value from the dropdown to the editor box using the onchange method (and maybe a reverse onchange to set the dropdown to 'custom' or some such, then you could make it degrade nicely on non-JS). Negative margin or absolute/relative tricks good as always.

    Ties you to javascript, but in the age of DHTML being renamed AJAX because of the addition of one object, that shouldn't be a deal-breaker.

  4. #4
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent deathshadow!

    I did a bit of digging, and can see how I would change a textbox with the onchange from a select option box (just using onchange="textid.value=this.value")

    But how do I have the textbox select the 'other' option from select/option box?

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no reason you can't have both...
    HTML Code:
    <input name="answer" list="answers">
    <datalist id="answers">
     <select name="fallbackanswer" onchange="answer.value = value">
      <option>
      <option>Foo
      <option>Bar
     </select>
    </datalist>
    Browsers that support <datalist> will hide the <select> and still make use of the predefined values in a drop-down of the textfield. Browsers that don't support <datalist> will just ignore it and use the <select>.
    Simon Pieters


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
  •