[thelist] Design question for Web control user interface
Hassan Schroeder
hassan at webtuitive.com
Mon Feb 16 16:04:46 CST 2004
Sam Carter wrote:
> I've got a form page that allows users to select a "text" value from a
> list. One value can be selected.
/
> This is great, but I want to allow users to enter a new value if it doesn't
> appear in the list.
>
> The FORM layout for this problem that occurs to me: Add an input text box -
> aside/above/below to the drop-down list. If the text box is not empty, use
> the value there, instead of the drop-down.
>
> This solution doesn't seem elegant since it requires two controls to achieve
> a single input value,
/
> A single control for the input that provides the two
> functions doesn't seem to be in the HTML recommendation.
Correct on both of the latter :-)
What you might consider doing is adding a last option like
<option value="edit">enter a different value</option>
and make your onchange='redisplay(this)' do something like:
function redisplay(el)
{
var thisInput = el;
var thisParent = el.parentNode;
if (el.options[el.selectedIndex].value == 'edit')
{
textEntry = document.createElement("input");
textEntry.setAttribute("type", "text");
textEntry.setAttribute("id", "centerIDSearch");
textEntry.setAttribute("name", "centerIDSearch");
thisParent.replaceChild(textEntry,thisInput);
}
else
{
// whatever you'd normally do onchange...
}
}
Now you've got a data entry field in the same place, with the same
name and id, tickety-boo and Bob's y'r uncle :-)
HTH,
--
Hassan Schroeder ----------------------------- hassan at webtuitive.com
Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com
dream. code.
More information about the thelist
mailing list