Site:Frontend:Forms

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(AJAX Forms)
Line 23: Line 23:
 
   <input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />
 
   <input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />
  
= AJAX Forms =
+
= 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>

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