Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(Basic Script)
(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.
  
  <script type="text/javascript">
 
    $(document).ready(function() {
 
 
       $('#someFormId').submit(function(e) {
 
       $('#someFormId').submit(function(e) {
 
         e.preventDefault();
 
         e.preventDefault();
Line 57: Line 55:
 
         });
 
         });
 
       });
 
       });
    });
 
  </script>
 
  
 
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.

Personal tools