First, it seems inefficient to make a request for each row. Among other things because the only way to control the loop is to perform synchronous requests, which is a method that contrasts with the purpose of ajax.
Second, your table needs to have a thead
and a tbody
to avoid looking for td
elements where the th
headers go (resulting in an empty array).
Third, I would declare an array, execute the loop and in each iteration I would add an object to that array , so you do not have to trust the order in which the columns are sent or assume that will never change. The object already has the keys and that will serve you a lot.
Then:
jQuery(document).ready(function() {
jQuery('#enviar').on('click', function() {
var filas = [];
$('#table-2 tbody tr').each(function() {
var cuotano = $(this).find('td').eq(0).text();
var interes = $(this).find('td').eq(1).text();
var abonocapital = $(this).find('td').eq(2).text();
var valorcuota = $(this).find('td').eq(3).text();
var saldocapital = $(this).find('td').eq(4).text();
var fila = {
cuotano,
interes,
abonocapital,
valorcuota,
saldocapital
};
filas.push(fila);
});
console.log(filas);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div class="container">
<button id="enviar">Enviar</button>
<table class="table table-striped" id="table-2">
<thead>
<tr>
<th>Cuota No.</th>
<th>Interés </th>
<th>Abono al Capital</th>
<th>Valor cuota</th>
<th>Saldo al Capital</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>36364</td>
<td>57037</td>
<td>93401</td>
<td>553073</td>
</tr>
<tr>
<td>2</td>
<td>29456</td>
<td>63945</td>
<td>93401</td>
<td>622957</td>
</tr>
<tr>
<td>3</td>
<td>17136</td>
<td>76265</td>
<td>93401</td>
<td>581032</td>
</tr>
<tr>
<td>4</td>
<td>22617</td>
<td>70784</td>
<td>93401</td>
<td>730122</td>
</tr>
<tr>
<td>5</td>
<td>39457</td>
<td>53944</td>
<td>93401</td>
<td>745940</td>
</tr>
<tr>
<td>6</td>
<td>17447</td>
<td>75954</td>
<td>93401</td>
<td>555536</td>
</tr>
<tr>
<td>7</td>
<td>23146</td>
<td>70255</td>
<td>93401</td>
<td>754439</td>
</tr>
<tr>
<td>8</td>
<td>15335</td>
<td>78066</td>
<td>93401</td>
<td>536352</td>
</tr>
<tr>
<td>9</td>
<td>27797</td>
<td>65604</td>
<td>93401</td>
<td>529242</td>
</tr>
<tr>
<td>10</td>
<td>17375</td>
<td>76026</td>
<td>93401</td>
<td>733329</td>
</tr>
<tr>
<td>11</td>
<td>35406</td>
<td>57995</td>
<td>93401</td>
<td>746539</td>
</tr>
<tr>
<td>12</td>
<td>23206</td>
<td>70195</td>
<td>93401</td>
<td>735203</td>
</tr>
<tr>
<td>13</td>
<td>13457</td>
<td>79944</td>
<td>93401</td>
<td>647672</td>
</tr>
<tr>
<td>14</td>
<td>24084</td>
<td>69317</td>
<td>93401</td>
<td>602008</td>
</tr>
<tr>
<td>15</td>
<td>15717</td>
<td>77684</td>
<td>93401</td>
<td>743478</td>
</tr>
</tbody>
</table>
</div>
When the loop has been executed, filas
has a content with the form:
[
{
"cuotano": "1",
"interes": "36364",
"abonocapital": "57037",
"valorcuota": "93401",
"saldocapital": "553073"
},
{
"cuotano": "2",
"interes": "29456",
"abonocapital": "63945",
"valorcuota": "93401",
"saldocapital": "622957"
}
]
And this you can send to the backend by doing:
$.ajax({
type: "POST",
url: "crud/register-payment-plan.php",
data: {valores : JSON.stringify(filas) },
success: function(data) {
console.log(data);
}
});
On your backend, you receive that object as a json_encoded string, so you convert it to an array of associative arrays:
$filas = json_decode($_POST['valores'], true);
That arrangement has the form:
[
[
'cuotano' => 1,
'interes' => 36364,
'abonocapital' => 57037,
'valorcuota' => 93401,
'saldocapital' => 553073,
],
[
'cuotano' => 2,
'interes' => 29456,
'abonocapital' => 63945,
'valorcuota' => 93401,
'saldocapital' => 622957,
],
[
'cuotano' => 3,
'interes' => 17136,
'abonocapital' => 76265,
'valorcuota' => 93401,
'saldocapital' => 581032,
],
]
Now, to make the insertions, you go through that array of fixes, but you do not manually interpolate the variables, but you use a prepared statement ( in this example I'm going to omit the field payment_date_applied
because it is not clear where quit $dates
). The funny thing is that you only need to prepare the statement once, it's much more efficient.
include_once '../connection/connection.php';
$stmt = $conn->prepare("INSERT INTO payment_plan (
loan_id,
fee_number,
tentative_payment_date,
fee_value,
pending_value,
state
) VALUES (
'16',
?,
'2018-10-10',
?,
?,
'pendiente'
)");
That prepared sentence has three placeholders. You binde them to three variables:
$stmt->bind_param('sss', $cuotano, $valorcuota, $saldocapital);
Although ... looking at your table, it seems that the fields are numeric, so you better castrate them:
$stmt->bind_param('ddd', $cuotano, $valorcuota, $saldocapital);
And then you iterate over the elements of the $filas
array simply by assigning value to those variables and invoking execute
. If the output of execute
is true
, you add 1 to a counter that at the end reports the number of records inserted:
$inserciones = 0;
foreach ($filas as $fila) {
$cuotano = $fila['cuotano'];
$valorcuota = $fila['valorcuota'];
$saldocapital = $fila['saldocapital'];
$result = $stmt->execute();
if($result) {
$inserciones++;
}
}
echo "Se insertaron $inserciones registros";