[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