Site:Frontend:Forms
MetrixJustin (Talk | contribs) (→Basic Script) |
MetrixJustin (Talk | contribs) (→Basic Script) |
||
Line 31: | Line 31: | ||
The following snippet will listen for a form with the ID of "someFormId" to be submitted. | The following snippet will listen for a form with the ID of "someFormId" to be submitted. | ||
− | |||
− | |||
$('#someFormId').submit(function(e) { | $('#someFormId').submit(function(e) { | ||
e.preventDefault(); | e.preventDefault(); | ||
Line 57: | Line 55: | ||
}); | }); | ||
}); | }); | ||
− | |||
− | |||
This script should be placed in the appropriate controller and instantiated only when necessary. | This script should be placed in the appropriate controller and instantiated only when necessary. |
Revision as of 10:31, 18 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.
$('#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 } }); });
This script should be placed in the appropriate controller and instantiated only when necessary.