Simpltry form widgets

simptry_widget="move_to_next"

Occasionally it is handy to automatically push users to the next field once the minimum number of character has been met. So of the occasions are zip codes, and phone numbers. Simpltry offers an easy way to implement this, first you must set the maxlength attribute of you text field. Then add simptry_widget="move_to_next". After the max length of characters is met it moves the user to the next input, select box or text area. Give it a try!

Zipcode:

Phone:

example markup:

<p>Zipcode: <input type="text" id="zipcode" maxlength="5" size="5" simpltry_widget="move_to_next" /></p>
<p>Phone:
	<input type="text" maxlength="3" name="areacode" id="areacode" size="4" simpltry_widget="move_to_next" />
	<input type="text" maxlength="3" name="pre" id="pre" size="4" simpltry_widget="move_to_next" />
	<input type="text" maxlength="4" name="suff" id="suff" size="5" simpltry_widget="move_to_next" />
</p>
<p>
    <select>
	    <option>test</option>
    </select>
</p>
				    

simpltry_widget="inplace_editor"

This is a demo of the Ajax.InPlaceEditor from script.aculo.us. There is a mandatory option (url) that is the server side path for saving what the user changes. Click on Hello world below to see the demo.

Hello world

example markup:

<p simpltry_widget="inplace_editor" simpltry_options="ajaxOptions:{method:'get'}, 
    url: 'inplace_editor_save.html'">Hello world</p>
			        

simpltry_widget="ajax_autocompleter"

The auto completer is another control that is awesome. It becomes even simpler to use when you use the simpltry_widget ajax_autocompleter. The same as the inplace_editor there is a mandatory option (url) that is the server side path for getting the appropriate list. To see the demo start typing in the field below.

example markup:

<input size="100" type="text" simpltry_widget="ajax_autocompleter" 
    simpltry_options="method:'get', url: 'autocomplete_list.html'" />
			        

Usually you need to provide the element to put the results in as the Second parameter for Ajax.Autocompleter, but if you don't provide it in the option "autoCompleteElement" simpltry will build a div for you.