jQuery DataTables: How to submit all pages form data directly

Example for article at https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/

by gyrocode

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<h3><a href="https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/">jQuery DataTables: How to submit all pages form data</a></h3>
<h4>Submit all pages form data directly</h4>
<a href="https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/">See full article on Gyrocode.com</a>
<hr><br>

<form name="frm-example" id="frm-example" method="POST">
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Age</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Age</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>1</td>
         <td>Tiger Nixon</td>
         <td><input type="text" name="r1_age" value="61" size="3"></td>
         <td><select size="1" name="r1_office">
            <option value="Edinburgh" selected="selected">Edinburgh</option>
            <option value="London">London</option>
            <option value="New York">New York</option>
            <option value="San Francisco">San Francisco</option>
            <option value="Tokyo">Tokyo</option>
         </select></td>
         <td><input type="checkbox" name="r1_selected" value="1"></td>
         <td><textarea name="r1_comments" rows="2" cols="10"></textarea></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Garrett Winters</td>
         <td><input type="text" name="r2_age" value="63" size="3"></td>
         <td><select size="1" name="r2_office">
            <option value="Edinburgh">Edinburgh</option>
            <option...

JavaScript

$(document).ready(function (){
   var table = $('#example').DataTable();
   
   // Handle form submission event 
   $('#frm-example').on('submit', function(e){
      var form = this;

      // Encode a set of form elements from all pages as an array of names and values
      var params = table.$('input,select,textarea').serializeArray();

      // Iterate over all form elements
      $.each(params, function(){     
         // If element doesn't exist in DOM
         if(!$.contains(document, form[this.name])){
            // Create a hidden element 
            $(form).append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         } 
      });      

      // FOR DEMONSTRATION ONLY
      // The code below is not needed in production
      
      // Output form data to a console     
      $('#example-console-form').text($(form).serialize());
       
      // Remove added elements
      $('input[type="hidden"]', form).remove();

      // Prevent actual form submission
      e.preventDefault();
   });      
});