Site:Frontend:Forms
From Metrixstream
(Difference between revisions)
MetrixJustin (Talk | contribs) (→Ajax Forms) |
MetrixJustin (Talk | contribs) (→Ajax Forms) |
||
Line 26: | Line 26: | ||
The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page. | The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page. | ||
+ | |||
+ | == Basic Script == | ||
+ | |||
+ | The following snippet will listen for a form with the ID of "someFormId" to be submitted. | ||
<script type="text/javascript"> | <script type="text/javascript"> |
Revision as of 16:18, 15 June 2012
Contents |
Introduction
Parameters
Mode
This optional parameter sets the response type.
Avaliable modes: xml, json
<input type="hidden" name="mode" value="xml" />
Continue
This optional parameter is the page you will be redirected to after a successful form submit.
<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />
Retry
This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.
<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />
Ajax Forms
The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.
Basic Script
The following snippet will listen for a form with the ID of "someFormId" to be submitted.
<script type="text/javascript"> $(document).ready(function() { $('#someFormId').submit(function(e) { e.preventDefault(); var form = $(this): if(form.data('disabled') == 'true') return; form.data('disabled', 'true'); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), success: function(data) { if('ok' == $('status', data).text()) { // Form has returned successfully } else { // Form has returned with an error } form.removeData('disabled'); }, error: function() { // Could not get data back from the post } }); }); }); </script>