Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(AJAX Forms)
(Ajax Forms)
Line 32: Line 32:
 
         e.preventDefault();
 
         e.preventDefault();
 
         var form = $(this):
 
         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'),

Revision as of 16:16, 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>
Personal tools