Create multidimensional array based on recursive HTML-form

Create multidimensional array based on recursive HTML-form

Hi, I am working on an application with some workout exercise. For this I am building a HTML-form which is repeated several times as there are different exercises which needs to be entered.

I want to transfer the input into a multidimensional array I can work in PHP before inserting into a database. I found a way through serialize(), but it lists all input out as individual arrays. I can manage this data and set up a function to sort them later in PHP, but I believe there is a better way to structure the data in a multidimensional array before even sending to PHP. I am looking for an array which loos sorta like
  1. array(
  2.       [exercise_id_1] => array(
  3.             [set_1] => array (
  4.                   key1 => item 1,
  5.                   key2 => item 2,
  6.                   ....
  7.                   ) 
  8.           [set_2] => array (
  9.                   key1 => item 1,
  10.                   key2 => item 2,
  11.                   ....
  12.                   )
  13.             )
  14.       [exercise_id_2] => array(
  15.           [set_1] => array (
  16.                   key1 => item 1,
  17.                   key2 => item 2,
  18.                   ....
  19.                   ) 
  20.           [set_2] => array (
  21.                   key1 => item 1,
  22.                   key2 => item 2,
  23.                   ....
  24.                   )
  25.             )
My PHP looks like
  1.     echo "<form method=\"post\" name=\"save_workout_form\" class=\"save_workout_form\">";
  2.     foreach ($array as $key=>$value) {
  3.       echo "\n<div class=\"view_workout\">\n<legend>".$array[$key][0]['Exercise_Name']."</legend>";
  4.       echo "<table>";
  5.       echo "<tr>";
  6.       echo "<td></td><td>Weight</td><td>Reps</td>";
  7.       echo "</tr>";
  8.       for ($j=0; $j < count($array[$key]); $j++) {
  9.           echo "<tr>";
  10.           echo "<td><div class=\"view_workout_set_id\"># ".$array[$key][$j]['set_ID']."</div></td>\n";
  11.           echo "<td><input type=\"input\" name=\"Weight\" placeholder=\"".$array[$key][$j]['Weight']."\"</td>\n";
  12.           echo "<td><input type=\"input\" name=\"repetition\" placeholder=\"".$array[$key][$j]['repetition']."\"</td>\n";
  13.           echo "<input type=\"hidden\" name=\"field_id\" value=\"h\">\n";
  14.           echo "<input type=\"hidden\" name=\"exercise_id\"  value=\"h\">\n";
  15.           echo "<input type=\"hidden\" name=\"planned_workout_id\"  value=\"h\">\n";
  16.           echo "</tr>";
  17.       }
  18.       echo "\n</table>";
  19.       echo "\n<input type=\"submit\" value=\"Save\" class=\"save_workout_btn\">";
  20.       echo "\n</div>";
  21.     }
  22.     echo "</form>";
my jQuery is:
  1. $( document ).ready(function(){
  2.   // $(function() {
  3.     $(document).on('click', ".save_workout_btn", function(event){
  4.     event.preventDefault();
  5.     console.log("Save workout btn er trykket");
  6.     $('.save_workout_form').submit();
  7.     });
  8. });

  10. //IF "SAVE WORKOUT" BTN IS CLICKED PERFORM DATA TRANSFER TO PHP FILE
  11. $( document ).ready(function(){
  12.   $(function() {
  13.     $(document).on('submit', ".save_workout_form", function(event){
  14.       console.log("save workout function is activated");
  15.       //var dataInput = $('input[name=Weight]').serializeArray()
  16.       var dataInput = $(".save_workout_form").serializeArray();
  17.       var workout_id_array = { "id": 1, "class": 'save_workout',"dataArray": dataInput};
  18.       $.ajax({
  19.         type        : 'POST',
  20.         url         : 'action_page.php',
  21.         data        : workout_id_array,
  22.         success     : function (data) {
  23.           console.log(data);
  24.           event.preventDefault();
  25.         } // closing succss
  26.       }); // closing $.ajax({
  27.       event.preventDefault();
  28.     }); //closing $(document).on('submit', ".save_workout_form", function(event){
  29.   });
  30. });
The output is:
  1. [dataArray] => Array
  2.         (
  3.             [0] => Array
  4.                 (
  5.                     [name] => Weight
  6.                     [value] => 
  7.                 )

  9.             [1] => Array
  10.                 (
  11.                     [name] => repetition
  12.                     [value] => 
  13.                 )

  15.             [2] => Array
  16.                 (
  17.                     [name] => field_id
  18.                     [value] => h
  19.                 )
  20. ...... looping through all 53 fields
There has got to be a smarter way..