title: Multi-Page Form Submit
body: <p>I have an issue that I can't seem to navigate my way through.</p>
  
  <p>To start, I have a website that was built by a professional, and we no longer have a working relationship with that company. I'm managing the site myself now. I'm capable, but I am in no way an experienced web developer.</p>
  
  <p>Background: We have an application procedure that uses a multipage form presented to the end user. The form is presented in 7 steps, but it's all done from one php file, using (I think) jquery / javascript to cycle through the steps, and validate some fields. In the final step, a summary is presented for the user to submit. This works beautifully. </p>
  
  <p>Below is what I believe to be the relevant javascript that handles the page cycling:</p>
  
  <pre><code>&lt;script&gt;
  $(function () {
  
      window.confirmLeave = true;
  
      $('.datefield').datepicker();
  
      var cache = {};                                                                                             // caching inputs for the visited steps
  
      $("#appForm").bind("step_shown", function(event,data){  
  
           if(data.isLastStep){                                                                                      // if this is the last step...then
                  $("#summaryContainer").empty();                                                                     // empty the container holding the 
                  $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
                      if(id === "summary") return;                                                                    // if it is the summary page then just return
                      cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
                      cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
                  });
              }else if(data.previousStep === "summary"){                                                              // if we are movin back from the summary page
                  $.each(cache, function(id, inputs){                                                                 // for each of the keys in the cache...do
                      var i = inputs.detach().appendTo("#" + id).find(":input");                                      // put the input divs back into their normal step
                      if(id === data.currentStep){                                                                    // (we are moving back from the summary page so...) if enable inputs on the current step
                           i.removeAttr("disabled");
                      }else{                                                                                          // disable the inputs on the rest of the steps
                          i.attr("disabled","disabled");
                      }
                  });
                  cache = {};                                                                                         // empty the cache again
              }
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I've also included the html of the form below:</p>
  
  <pre><code>&lt;form name="appForm" id="appForm" action="submit-app-exec.php" method="post" 
  enctype="multipart/form-data" autocomplete="off" onSubmit="showProgressBar()"&gt;
  
  &lt;fieldset class="step" id="page_1"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step1.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="page_2"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step2.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="page_3"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step3.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="page_4"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step4.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;    
  
  &lt;fieldset class="step" id="page_5"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step5.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="page_6"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step6.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="page_7"&gt;
  &lt;div class="input"&gt;
  &lt;?php include("add-company/step7.html"); ?&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset class="step" id="summary" &gt;
      &lt;span class="font_normal_07em_black"&gt;Summary page&lt;/span&gt;&lt;br /&gt;
      &lt;p&gt;Please verify your information below.&lt;/p&gt;
      &lt;div id="summaryContainer"&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;div id="wizardNavigation"&gt;
  
      &lt;button class="navigation_button" onclick="javascript:saveApp()"&gt;Save&lt;/button&gt;
      &lt;input class="navigation_button" id="back" value="Back" type="reset" /&gt;
      &lt;input class="navigation_button" id="next" value="Next" type="submit" onclick="javascript:noSaveApp()" /&gt;
  
      &lt;div class="clearFix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>When the page is loaded, each field set has additional class and style attributes:</p>
  
  <pre><code>class="step ui-formwizard-content ui-helper-reset ui-corner-all" style="display: none;"
  </code></pre>
  
  <p>During the process, I can watch with firebug, and see that the display: none; cycles through and changes to "block" when interacting with that fieldset.</p>
  
  <p>The issue: We did not build in any way for the user to save progress and complete later. I'm attempting to do this now. I have successfully created the "save" button, which triggers a javascript to change the action of the form, which POSTS the data to a new php file that handles and processes the POST data into MySQL. This works, however, the POST only passes the data from the currently viewed fieldset, instead of POSTing all the data. And I cannot figure out how to make sure all the form data is POSTed. Any guidance or suggestion would be helpful. Thanks.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I was able to get the correct page to load with the following:</p>
  
  <pre><code>$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); }); 
  </code></pre>
  
  <p>This loads up the correct page. The issue now, is that the final step of this is a summary page that shows all input elements for final submission. However, it only seems to display elements from the pages that were viewed, I'm pretty sure it's the array "data.activatedSteps" that determines whether or not the elements are dispalyed in the final summary. Would your code address this better than mine? Thanks again for your help with this. –</p>