Submitting Multiple-Page Forms

BluntSporks

There was a previous discussion on how to submit forms that have hidden parts because they span multiple pages. That discussion did not seem to be resolved successfully and most of its links were broken, so I decided to reopen it.

To use my code, do the following:
1. Put one or more tables inside a form. Each table should have class="display" to be automatically turned into a DataTable (this step is optional).
2. Give each input element in your form an ID.
3. Include the below jQuery code somewhere.

The basic technique is to get a list of all visible elements, get a list of all elements, and for all the non-visible elements, convert them to hidden elements and append them to the form. There is a slight wrinkle that checked elements, such as checkbox and radio, should only be appended if they are checked.

Hope this helps!

$(document).ready(function () {
   // Automatically load each DataTable that is marked with the display class
   $("table.display").each(function() {
      $(this).DataTable();
   });

   // When a form is submitted, find the tables inside the display class, and append all their hidden nodes to this
   // form. That is necessary because otherwise form inputs on hidden pages will not be submitted. See
   // http://www.datatables.net/examples/api/form.html for details.
   $("form").submit(function() {
      var form = this;

      // Get list of visible ID values, because we do not need to duplicate them
      var visibleIDs = [];
      $(form).find("input, select, textarea").each(function(i, visibleInput) {
         var visibleID = $(visibleInput).attr("id");
         if (visibleID != undefined) {
            visibleIDs.push(visibleID);
         }
      });
      $(form).find("table.display").each(function(j, table) {
         $(table).DataTable().$("input, select, textarea").each(function(k, input) {
            var type = $(input).attr("type");
            var useInput;
            if (type == "checkbox" || type == "radio") {
               // Must see if box is checked before converting to hidden type
               useInput = $(input).prop("checked");
            }
            else {
               // All other input types are automatically converted
               useInput = true;
            }
            if (useInput) {
               var newID = $(input).attr("id");

               // Only process the newID if it is not already a visible input
               if (visibleIDs.indexOf(newID) == -1) {
                  // Use hidden type so that the form inputs are not all visible
                  $(input).attr("type", "hidden");

                  // Append all inputs, including the ones from hidden pages, to the form
                  $(form).append(input);
               }
            }
         });
      });
   });

   // Automatically set the focus on any element that has the autofocus ID
   $("#autofocus").focus();
});