Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(Ajax Forms)
(Ajax Forms)
Line 26: Line 26:
  
 
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.
 +
 +
== Basic Script ==
 +
 +
The following snippet will listen for a form with the ID of "someFormId" to be submitted.
  
 
   <script type="text/javascript">
 
   <script type="text/javascript">

Revision as of 16:18, 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.

Basic Script

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) {
       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