Using ajax, how to:
<script type="text/javascript">
$(document).ready(function() {
$('#btnUpdPermission').on('click', function(e) {
var id = '<?php echo $_GET['id'];?>';
$('#table_perm tbody tr').each(function(){
});
});
});
</script>
<div class="table-responsive">
<table class="table table-bordered" id="table_perm">
<thead>
<th>Permission</th>
<th>Read</th>
<th>Create</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr>
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Quotation</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Banking</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" id="btnUpdPermission">Save</button>
If I understand it well, each row corresponds to permissions to one file master table, right? (identified by file_id
in your database) If that's the case, first I'd put that id each table row (as an id, as a data-* field, etc.)...
<tr data-id="3">
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
<tr data-id="4">
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
...................
Then, considering your table structure, to loop your rows and get all the checkboxes values, one option could be...
var myPermissions = {};
$('#table_perm tbody tr').each(function() {
var sectionId = $(this).data('id');
var sectionPermissions = [];
$(this).find('input.big-checkbox:checked').each(function() {
sectionPermissions.push($(this).attr('name').charAt(0));
});
myPermissions[sectionId] = sectionPermissions.join(',');
});
So you finally get an object myPermissions
with all permissions for each section...
{
3: "r,c",
4: "r,d",
5: "c,e,d"
....
}
You can send that in your ajax call as a parameter.
NOTE: Two pieces of advice in your code...
</td></td>
)If you're going to do this collecting data with ajax and not using a form, to avoid getting the permission letter from the string name, it would be better if you assign a value to each checkbox indicating the letter of that permission. I mean...
<td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
..........
... so then would be easier and cleaner to get the value...
sectionPermissions.push($(this).val());
I hope it helps