Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(Retry)
 
(13 intermediate revisions by one user not shown)
Line 1: Line 1:
== Introduction ==
+
= Introduction =
  
== Parameters ==
+
= Parameters =
  
=== Action ===
+
== Mode ==
 
+
=== Verb ===
+
This optional
+
 
+
=== Mode ===
+
  
 
This optional parameter sets the response type.
 
This optional parameter sets the response type.
Line 16: Line 11:
 
   <input type="hidden" name="mode" value="xml" />
 
   <input type="hidden" name="mode" value="xml" />
  
 
+
== Continue ==
=== Continue ===
+
  
 
This optional parameter is the page you will be redirected to after a successful form submit.
 
This optional parameter is the page you will be redirected to after a successful form submit.
Line 23: Line 17:
 
   <input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />
 
   <input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />
  
=== Retry ===
+
== 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.
 
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 =
 +
 
 +
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 ?>" />
Personal tools