Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(Ajax Forms)
(Retry)
 
(6 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="continue" value="http://example.com/?page=some-failed-page" />
+
   <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.
  
  <script type="text/javascript">
+
== Basic Script ==
    $(document).ready(function() {
+
 
      $('#someFormId').submit(function(e) {
+
The following snippet will listen for a form with the ID of "someFormId" to be submitted.
        e.preventDefault();
+
 
        var form = $(this):
+
  $('#someFormId').submit(function(e) {
 +
    e.preventDefault();
 +
    var form = $(this):
 
              
 
              
        if(form.data('disabled') == 'true') return;
+
    if(form.data('disabled') == 'true') return;
        form.data('disabled', 'true');
+
    form.data('disabled', 'true');
 
          
 
          
        $.ajax({
+
    $.ajax({
          type: form.attr('method'),
+
      type: form.attr('method'),
          url:  form.attr('action'),
+
      url:  form.attr('action'),
          data: form.serialize(),
+
      data: form.serialize(),
          success: function(data) {
+
      success: function(data) {
            if('ok' == $('status', data).text()) {
+
        if('ok' == $('status', data).text()) {
              // Form has returned successfully
+
          // Form has returned successfully
            } else {
+
        } else {
              // Form has returned with an error
+
          // Form has returned with an error
            }
+
        }
            form.removeData('disabled');
+
        form.removeData('disabled');
          },
+
      },
          error: function() {
+
      error: function() {
            // Could not get data back from the post
+
        // Could not get data back from the post
          }
+
       }
        });
+
       });
+
 
     });
 
     });
   </script>
+
  });
 +
 
 +
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 ?>" />
Personal tools