Site:Frontend:Forms
MetrixJustin (Talk | contribs) (→AJAX Forms) |
(→Retry) |
||
(7 intermediate revisions by one user not shown) | |||
Line 21: | Line 21: | ||
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. | 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=" | + | <input type="hidden" name="retry" value="http://example.com/?page=some-failed-page" /> |
= Ajax Forms = | = Ajax Forms = | ||
Line 27: | Line 27: | ||
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. | |
− | + | ||
− | + | $('#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. | ||
+ | |||
+ | = Custom Fields = | ||
+ | |||
+ | Custom fields can be updated just like other form fields but require different naming. The custom field is prefixed with cst_ followed by the custom field name. | ||
+ | |||
+ | Ex. If a custom field on a user object is "specialNote", the input name would be "cst_specialNote". | ||
+ | |||
+ | <input type="text" name="cst_specialNote" value="<?cs var:MS.site.user.custom.specialNote.value ?>" /> |
Latest revision as of 10:18, 24 July 2012
Contents |
[edit] Introduction
[edit] Parameters
[edit] Mode
This optional parameter sets the response type.
Avaliable modes: xml, json
<input type="hidden" name="mode" value="xml" />
[edit] 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" />
[edit] 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="retry" value="http://example.com/?page=some-failed-page" />
[edit] 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.
[edit] 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.
[edit] Custom Fields
Custom fields can be updated just like other form fields but require different naming. The custom field is prefixed with cst_ followed by the custom field name.
Ex. If a custom field on a user object is "specialNote", the input name would be "cst_specialNote".
<input type="text" name="cst_specialNote" value="<?cs var:MS.site.user.custom.specialNote.value ?>" />