How to submit via AJAX multiple values/array? - php

Question

I have a HTML table which is editable/dynamic. Please see table below:
<table>
<tr>
<td><input id="txt_row_{{ $records[$i]["row_id"] }}" type="hidden" value="{{$records[$i]["row_id"]}}" /></td>
<td><input type="checkbox" id="is_workingday_row_{{ $records[$i]["row_id"] }}" checked /></td>
</tr>
<tr>
<td><input id="txt_row_{{ $records[$i]["row_id"] }}" type="hidden" value="{{$records[$i]["row_id"]}}" /></td>
<td><input type="checkbox" id="is_workingday_row_{{ $records[$i]["row_id"] }}" checked /></td>
</tr>
</table>
Now, how can I loop thru the entire table to get the values/changes thru jQuery and submit it via AJAX to a PHP script? Can you at least point me in the right direction? Thanks.

Answer 1

Hi #Ronald you can use form instead of table but if you are using table you have to use jquery each function to get all inputs value and create object of these values and after that you can send this through ajax
$(document).ready(function(){
var allInputs = $('table').find('input');
var obj = {};
$(allInputs).each(function(){
var key = $(this).attr('name');
var value = $(this).val();
obj[key] = value
});
console.log(obj);
});
$(document).ready(function(){
var allInputs = $('table').find('input');
var obj = {};
$(allInputs).each(function(){
var key = $(this).attr('name');
var value = $(this).val();
obj[key] = value
});
console.log(obj);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input id="txt_row_1" type="hidden" name="txt_row_1" value="record1" /></td>
<td><input type="checkbox" name="is_workingday_row_1" id="is_workingday_row_1" checked /></td>
</tr>
<tr>
<td><input id="txt_row_2" name="txt_row_2" type="hidden" value="record2" /></td>
<td><input type="checkbox" name="is_workingday_row_2" id="is_workingday_row_2" checked /></td>
</tr>
</table>