View source for Developer Area/Core Subsystems/Form API (Pieforms)/Form APIAJAXForms

<div class="toolbar"><br /> The form API supports submission of forms to a hidden iframe (not really AJAX but as I'm writing new documentation elsewhere I can't be bothered renaming this page), just by toggling a single field and changing the 'formname_submit' function to output JSON instead of redirect the user. This makes forms very responsive.</div><div id="section_1">

===Form submission using JS===

If you want the form to be submitted to the server without a page reload, then all you need to do is set 'jsform' to true, and make sure your formname_submit function echos JSON and exits, as in this example:

<div class="plugin tightenable"><code><font color="#000000"> <font color="#0000bb">$f </font><font color="#007700">= array(<br />     </font><font color="#dd0000">'name' </font><font color="#007700">=&gt; </font><font color="#dd0000">'editsitepage'</font><font color="#007700">,<br />     </font><font color="#dd0000">'method' </font><font color="#007700">=&gt; </font><font color="#dd0000">'post'</font><font color="#007700">,<br />     </font><font color="#dd0000">'jsform' </font><font color="#007700">=&gt; </font><font color="#0000bb">true</font><font color="#007700">,<br />     </font><font color="#dd0000">'jssuccessfunction' </font><font color="#007700">=&gt; </font><font color="#dd0000">'contentSaved'</font><font color="#007700">,<br />     </font><font color="#dd0000">'action' </font><font color="#007700">=&gt; </font><font color="#dd0000"><nowiki>''</nowiki></font><font color="#007700">,<br />     </font><font color="#dd0000">'elements' </font><font color="#007700">=&gt; array(<br />         </font><font color="#dd0000">'pagename' </font><font color="#007700">=&gt; array(<br />             </font><font color="#dd0000">'type' </font><font color="#007700">=&gt; </font><font color="#dd0000">'text'</font><font color="#007700">,<br />             </font><font color="#dd0000">'title' </font><font color="#007700">=&gt; </font><font color="#0000bb">get_string</font><font color="#007700">(</font><font color="#dd0000">'pagename'</font><font color="#007700">),<br />             </font><font color="#dd0000">'value' </font><font color="#007700">=&gt; </font><font color="#dd0000"><nowiki>''</nowiki></font><font color="#007700">,<br />         ),<br />         </font><font color="#dd0000">'pagetext' </font><font color="#007700">=&gt; array(<br />             </font><font color="#dd0000">'name' </font><font color="#007700">=&gt; </font><font color="#dd0000">'pagetext'</font><font color="#007700">,<br />             </font><font color="#dd0000">'type' </font><font color="#007700">=&gt; </font><font color="#dd0000">'textarea'</font><font color="#007700">,<br />             </font><font color="#dd0000">'rows' </font><font color="#007700">=&gt; </font><font color="#0000bb">20</font><font color="#007700">,<br />             </font><font color="#dd0000">'cols' </font><font color="#007700">=&gt; </font><font color="#0000bb">80</font><font color="#007700">,<br />             </font><font color="#dd0000">'title' </font><font color="#007700">=&gt; </font><font color="#0000bb">get_string</font><font color="#007700">(</font><font color="#dd0000">'pagetext'</font><font color="#007700">),<br />             </font><font color="#dd0000">'value' </font><font color="#007700">=&gt; </font><font color="#dd0000"><nowiki>''</nowiki></font><font color="#007700">,<br />             </font><font color="#dd0000">'rules' </font><font color="#007700">=&gt; array(<br />                 </font><font color="#dd0000">'required' </font><font color="#007700">=&gt; </font><font color="#0000bb">true<br />             </font><font color="#007700">)<br />         ),<br />         </font><font color="#dd0000">'submit' </font><font color="#007700">=&gt; array(<br />             </font><font color="#dd0000">'value' </font><font color="#007700">=&gt; </font><font color="#0000bb">get_string</font><font color="#007700">(</font><font color="#dd0000">'savechanges'</font><font color="#007700">),<br />             </font><font color="#dd0000">'type'  </font><font color="#007700">=&gt; </font><font color="#dd0000">'submit'</font><font color="#007700">,<br />         )<br />     )<br /> );<br /></font> </font> </code></div>

With jsform set to true, the form handler will create a javascript function that posts the form content to the 'action' target. Normally, you can just leave 'action' blank, as this will submit the data to the page where the form is defined.

; The formname_submit function is expected to process the request as normal, and then output JSON to describe the result. The format of this JSON is subject to change, however at the moment it is an array with the following fields
: :* an 'error' field set to either
:** false, if there are no errors, or
:** 'local', if the error is local to this callback, or
:** some other machine readable code for potentially global errors; and
:* a 'message' field set to an appropriate message.

'local' error messages will be displayed near the form's submit button (as decided by the renderer). Other errors are passed to the global error handler defined in mahara.js. (todo: this may not be implemented at this time - bug nigel if/when you need it)

The function json_reply($error, $message) will set the appropriate headers and send the json encoded array with the error and message fields set, for example,

<div class="plugin tightenable"><code><font color="#000000"> <font color="#007700">function </font><font color="#0000bb">fooform_submit</font><font color="#007700">(</font><font color="#0000bb">Pieform $form</font><font color="#007700">, </font><font color="#0000bb">$values</font><font color="#007700">) {<br />     </font><font color="#0000bb">set_config</font><font color="#007700">(</font><font color="#dd0000">'foo'</font><font color="#007700">, </font><font color="#0000bb">$values</font><font color="#007700">[</font><font color="#dd0000">'foo'</font><font color="#007700">]);<br />     </font><font color="#0000bb">$form</font><font color="#007700">-&gt;</font><font color="#0000bb">json_reply</font><font color="#007700">(</font><font color="#0000bb">PIEEFORM_OK</font><font color="#007700">, </font><font color="#0000bb">get_string</font><font color="#007700">(</font><font color="#dd0000">'setfoosuccessfully'</font><font color="#007700">));<br /> }<br /></font> </font> </code></div>

If the submission was successful, then the js function named in 'jssuccesscallback' will be called. 'jsfailurecallback' is also available, should you need it.

</div>