How to submit Form which consist dynamic columns and rows

Question

this is the form:

<table id="participants" class="table table-bordered table-hover table-responsive text-center">
<form action="gdcontroller.php" method="post" id="gdtestFrom" enctype="multipart/form-data">
<input type="hidden" name="action" value="groupDiscussion"/>
<h3 class="text-center">Over All Score Sheet </h3>
<thead class="alert-success">
    <tr>
        <th class="text-center">Participant</th>
        <?php 
            $skills = $conn->query("SELECT * from r_job_skill js
            LEFT JOIN tbl_skillset ss ON ss.ssid=js.title
            WHERE js.gdskill=1 AND id_job=54"); 
            while($skill = $skills->fetch_assoc() ){ ?>
            <th class="text-center"><?php echo  $skill['name'];?></th>
        <?php } ?>

        <th class="text-center">Over All Score</th>
        <th class="text-center"><a class="text-center btn btn-success addStudent">+ Add Student</a></th>
    </tr>
</thead>

<tbody id="tbodyid">    </tbody>
<div class="text-center"><button class="btn btn-primary text-center" type="submit" id="submitgdTest">SUBMIT GD TEST</div></button>
</form></table>

And my java script of add more functionality:

var studentCount = 1;
$("#gdBasic").click(function () {
var skillFrame = '';
<?php 
$skills = $conn->query("SELECT * from r_job_skill js LEFT JOIN tbl_skillset ss ON ss.ssid=js.title WHERE js.gdskill=1 AND id_job=54");  
while($skill = $skills->fetch_assoc() ){ ?>
skillFrame +='<td><input class="setScore" type="number" name="test[][<?php echo  $skill['ssid'];?>]"></td>';
<?php } ?>

$("#success_message").hide();
$("#warning_message").hide();
$.ajax({
    url: "gdcontroller.php",
    method: "POST",
    data: {gdbasicData: $("#gdbasicForm").serialize(), 'action':'getStudentsForGD'},
    dataType: "json",
    success: function (response) {
        var stundetFrame = '';
        if(response['success']==true){
            $("#startTest").show();
            //console.log(response['success']);
            $.each(response['studentData'], function(i, student) {

                stundetFrame += '<tr><td><div><img class="participantphoto" src=" '+student.profile_pic+' " width="50" /></div>'+student.student_fname+' '+student.student_lname+'</td>'+skillFrame+'<td>-</td><td><span class="removeStudent btn btn-danger text-center">Remove Student</span></td></tr>';
            })

            $('#participants tr:last').after(stundetFrame); 
            }else{
        }
    },
    error: function (request, status, error) {
    }
}); 
});

And i am trying to send form data to the controller but

only inputtype hidden value is coming I can see any arrays

how can i send this image form data to the controller. this what i tried in cotroller to see the array:

if ($_POST['action'] == 'groupDiscussion') {        
    echo "<pre>";
    print_r($_POST);
    exit;

Answer 1

Use serialize() method, it Encode a set of form elements as a string for submission.

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls.

Refrence