title: Submitting a form for each accordion
body: <p>I have an accordion with 4 headers/sections, each having a form inside it. I am needing to have each form be submitted to the server and a callback given, as well as the validation before the user can go on to the next step in the process. I have the validation working - i just used the default settings. Now how do I get a callback for each form being submitted? I know that i need to assign each Next button to submit, but I don't know how to do that with this script, since this script was designed for a single submit for one form. </p>
  
  <p>I am also not allowed to use PHP, as it's not something we use here. We use JSP for datacalls, so please refrain from PHP responses. thank you.</p>
  
  <p>My Script for validation:</p>
  
  <pre><code>$(document).ready(function(){
  // add * to required field labels
  $('label.form-field-label-required').append('&amp;nbsp;&lt;strong&gt;*&lt;/strong&gt;');
  
  // accordion functions
  var accordion = $("#accordion").accordion();
  var current = 0; 
  
  $.validator.addMethod("pageRequired", function(value, element) {
      var $element = $(element)
      function match(index) {
          return current == index &amp;&amp; $(element).parents("#accordion").length;
      }
      if (match(0) || match(1) || match(2)) {
          return !this.optional(element);
      }
      return "dependency-mismatch";
  }, $.validator.messages.required)
  
  
      var v = $("#cmaForm").validate({
      errorClass: "warning",
      onkeyup: false,
      onblur: false,
      submitHandler: function() {
          alert("Submitted, thanks!");
      }
  });
  
  
  // back buttons do not need to run validation
  $(".prevbutton").click(function(){
      accordion.accordion("activate", 0);
      current = 0;
  }); 
  $(".prevbutton").click(function(){
      accordion.accordion("activate", 1);
      current = 1;
  }); 
  // these buttons all run the validation, overridden by specific targets above
  $(".open2").click(function() {
    if (v.form()) {
      accordion.accordion("activate", 2);
      current = 2;
    }
  });
  $(".open1").click(function() {
    if (v.form()) {
      accordion.accordion("activate", 1);
      current = 1;
    }
  });
  $(".open0").click(function() {
    if (v.form()) {
      accordion.accordion("activate", 0);
      current = 0;
    }
  });
  });
  </code></pre>
  
  <p>My script for form submit: (i don't know what's going on with the formatting of the form submit script, but it shouldn't look like that)</p>
  
  <pre><code>$(document).ready(function() { 
  var options = { 
      target:        '#output2',   // target element(s) to be updated with server response 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse,  // post-submit callback 
      clearForm: true        // clear all form fields after successful submit     
  
  }; 
  
  $('#cmaForm').submit(function() { 
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
  </code></pre>
  
  <p>}); </p>
  
  <p>function showRequest(formData, jqForm, options) { 
      var queryString = $.param(formData); </p>
  
  <pre><code>alert('About to submit: \n\n' + queryString); 
  return true; 
  </code></pre>
  
  <p>} </p>
  
  <p>function showResponse(responseText, statusText, xhr, $form)  { </p>
  
  <pre><code>alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
      '\n\nThe output div should have already been updated with the responseText.'); 
  </code></pre>
  
  <p>}</p>