Site:Frontend:Forms
From Metrixstream
(Difference between revisions)
MetrixJustin (Talk | contribs) |
MetrixJustin (Talk | contribs) (→AJAX Forms) |
||
| Line 23: | Line 23: | ||
<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" /> | <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. | ||
| + | |||
| + | <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> | ||
Revision as of 15:15, 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.
<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>