Handling of form data inside html table - html

Question

I have a dynamic table with select and input type="text" for each row in database. How do i set attr "name" for the select and input to be properly read on server side, and how do i pass the values with ajax? Should all names be dynamic, unique, or with array....There are more inputs in the form beside table, but my concern is the table data only. Table is sortable, so rows change positions, and serialize change the order as well.
<table id="config" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>Action</th>
<th class="no-sort">tag</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>
<div class="form-group">
<select class="full-width config-action" name="action" data-init-plugin="select2" data-disable-search="true">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="tag">Tag</option>
</select>
</div>
</td>
<td>
<input type="text" name="tag" class="form-control table-tag" >
</td>
</tr>
<tr>
<td>Name 2</td>
<td>
<div class="form-group">
<select class="full-width config-action" name="action" data-init-plugin="select2" data-disable-search="true">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="tag">Tag</option>
</select>
</div>
</td>
<td>
<input type="text" name="tag" class="form-control table-tag" >
</td>
</tr>
</tbody>
</table>
For ajax, if i serialize the data, they can change order if table is sorted, so names should be dynamic, but how should i handle this without serialize?
........
var form = $(this);
var action = form.attr('action');
$.ajax({
type: "POST",
url: action,
data: form.serialize(),
success: function(response) {
if(response === 'true') {
}
else {
var msg = response;
}
}
});

Answer 1

May be you can dynamically add the "name" attributes before submitting the form this way:
$("input.table-tag").each(function(i){
$(this).attr("name","tag"+i);
})
The names will turn to be tag0, tag1 etc. Not sure if that is what is required.

Answer 2

Your form elements should be named appropriately in your HTML.
For instance:
<select name="table[1][action]" ...
<input name=table[1][tag]" ...
...
<select name="table[2][action]" ...
<input name=table[2][tag]" ...
Then you would do something like this, assuming you're using PHP:
foreach($_POST['table'] as $key => $row){
// now use $key, $row['tag'], $row['action'] ...
}
The $key variable would normally be a database ID.