Ajax form example

The SimpleForms extension can now use Ajax technology to allow forms to be posted asyncronously (i.e. not involving a page reload). The content in the server's response can be directed to replace a particular portion of the page. Very little javascript programming has been required to achieve this by using the Mootools Javascript framework.

Here is an example form which uses the new functionality. When a category from the dropdown list is selected and the submit button clicked, an Ajax request is generated which returns a list of all articles in the selected category. This list is then put into the content of a div element below the form.

Here's the wikitext source of the example,

{{#form:

	{{#input: type   = hidden
		| name   = content
		| value  = <nowiki> {{#dpl:category={{#request:cat}}}} </nowiki>
	}}

	{{#input: type   = select
		| name   = cat
		| *Select category {{#dpl: namespace = Category | format = ,\n*%TITLE%,, }}
	}}

	{{#input: type   = ajax
		| value  = List members
		| update = listcat-result
	}}
}}

<div id="listcat-result">''No results to display...''</div>

Source explained

The second hidden value, content contains the DPL query which produces the list of articles in the category. The query uses the #request parser-function to obtain the selected category which was posted in the input named cat. Notice that the wikitext of the DPL query has to be enclosed in a <nowiki> so that the unparsed wikitext query can be assigned to the hidden value. After the form content has been posted, SimpleForms will remove the surrounding <nowiki>'s before the content gets parsed.

The last input, with type=ajax works just like a normal submit button, but will work asyncronously using Ajax. the update parameter is used to direct the content of the server response to the element having id of "listcat-result" which is the div below the form.