How do I pass data from dynamic html rows in Ajax?

Question

I have this form in which user can add rows using JQuery:

<form id="frm_salary"  role="form" action="" method="post">
       <!--start of frm_salary--> 
       <div class="form-group">
          <label for="ca_salary_date1">Date:</label>
          <input type="date" class="form-control" name="ca_salary_date_filed" placeholder="Date" required/>
       </div>
       <div class="form-group">
          <label for="ca_purpose1">Purpose:</label>
          <input type="text" class="form-control" name="ca_salary_purpose" placeholder="Purpose" required/>
       </div>
       <table class="table table-bordered table-hover" id="tab_logic">
          <thead>
             <tr >
                <th class="text-center">
                   Area
                </th>
                <th class="text-center">
                   Date/s
                </th>
                <th class="text-center">
                   Number of Local Hires
                </th>
                <th class="text-center">
                   Salary Per Local Hire Per Day
                </th>
                <th class="text-center">
                   Amount
                </th>
             </tr>
          </thead>
          <tbody>
             <tr id='addr0'>
                <td>
                   <input type="text" name='ca_salary_area[]'  placeholder='Area' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_date[]' placeholder='Date/s' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_localhires[]' placeholder='Number of Local Hires' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_perday[]' placeholder='Salary Per Local Hire Per Day' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_amount[]' placeholder='Amount' class="form-control" />
                </td>
             </tr>
             <tr id='addr1'></tr>
          </tbody>
       </table>
       <div class="form-group">
          <input type="hidden" class="form-control" name="ca_total_salary" >
       </div>
       <div class="text-center"> 
          <input type="submit" name="submit_salary" class="btn btn-success" value="Submit" /> 
       </div>
    </form>
    <!--end of frm_salary-->

I also have this PHP code for inserting its value in the database. It is working.

<?php
$total_amount = 0;
if (isset($_POST['submit_salary'])) {
    //calculations
    for ($j = 0; $j < count($_POST['ca_salary_area']); $j++) {
        $nos_hire1               = $_POST['ca_salary_localhires'][$j];
        $nos_salaray1            = $_POST['ca_salary_perday'][$j];
        $subtotal_salary_amount1 = $nos_hire1 * $nos_salaray1;
        $total_amount += $subtotal_salary_amount1;
    }

    $form_data               = array();
    $form_data['date_filed'] = mysql_real_escape_string($_POST['ca_salary_date_filed']);
    $form_data['purpose']    = mysql_real_escape_string($_POST['ca_salary_purpose']);
    $form_data['total']      = $total_amount;

    $tbl    = "tblcasalaryform";
    // retrieve the keys of the array (column titles)
    $fields = array_keys($form_data);

    // build the query
    $sql_salary = "INSERT INTO " . $tbl . "
                                (`" . implode('`,`', $fields) . "`)
                                VALUES('" . implode("','", $form_data) . "')";

    // run the query result resource
    mysql_query($sql_salary);
    $last_id_inserted = mysql_insert_id($bd);

    echo $last_id_inserted;


    for ($i = 0; $i < count($_POST['ca_salary_area']); $i++) {
        $nos_hire               = $_POST['ca_salary_localhires'][$i];
        $nos_salaray            = $_POST['ca_salary_perday'][$i];
        $subtotal_salary_amount = $nos_hire * $nos_salaray;
        $sql                    = "INSERT INTO `tblcasalaryformdetails` SET
                                                `area` = '" . $_POST['ca_salary_area'][$i] . "', 
                                                `dates` = " . $_POST['ca_salary_date'][$i] . ",
                                                `number_of_local_hires` = " . $_POST['ca_salary_localhires'][$i] . ",
                                                `salary_per_local_hire_per_day` = " . $_POST['ca_salary_perday'][$i] . ",
                                                `amount` = " . $subtotal_salary_amount . ",
                                                `casalaryform_id` = " . $last_id_inserted . "";
        mysql_query($sql);
    }
    echo '<p class="bg-success" style="padding:5px;border-radius:5px;text-align:center">Successfully Inserted</p>';
}

?>

I want to use Ajax for this, my problem is how to I pass/get the value from the form table in which input names are dynamically created?

Answer 1

Is it jQuery?
Then something like:

var data = $( "#frm_salary" ).serialize();
$.post( "test.php", data )

But because jQuery.serialize() has some issues with square brackets, to get them in your $_POST all you have to do is add a little magic:

var data = $( "#frm_salary" ).serialize().replace(/%5B%5D/g, '[]');
$.post( "test.php", data )

As easy as that!

Answer 2

If you want to dynamically extract data from an HTML table, you can use JQuery's find() method.

Example:

$('#tab_logic').click(function(){

var firstColumn= $(this).find('td:first').text();
var secondColumn= $(this).find('td:nth-child(2)').text()
var thirdColumn= $(this).find('td:nth-child(3)').text()
...

}); 

You can display the extracted values in a modal and then POST the values in the database