Primeramente quiero decir que no soy experto en javascript, lo que quiero hacer es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item automaticamente en el input total, y a medida que yo vaya agregando un plan en la tabla, no se como hacerlo he estado buscado mucho información por internet y necesito ayuda.
$(document).ready(function() {
//Funcion para agregar plan a la tabla
function plan(plan_id) {
$.ajax({
url: '../buscar_plan.php',
type: 'POST',
data: {plan_id},
success: function (e) {
let planes = JSON.parse(e);
let template = '';
let cantidad = 1;
let total = 0.00;
planes.forEach(plan =>{
total = plan.valor * cantidad;
template += `
<tr id=${plan.id}>
<td class="id">${plan.id}</td>
<td>${plan.nombre}</td>
<td valor=${plan.valor}>
<input class="valor" type=number value="${plan.valor}" min="0">
</td>
<td>
<input class="cantidad" type=number value="1" min="1">
</td>
<td>
<input class="total" type=number value="${total}" readonly>
</td>
</tr>
`
});
$('#tablaplan').append(template);
}
});
}
});
De aqui hago una consulta php para los planes y un boton que agrega el plan
<fieldset>
<legend>Planes</legend>
<?php
$query = "SELECT * FROM plan; ";
$resultado = $mysqli->query($query);
?>
<label for="plan">Planes:</label>
<select name="plan" id="plan">
<?php
foreach ($resultado as $pl):
?>
<option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
<?php endforeach; ?>
</select>
<div class="margin-bottom alinear-derecha">
<a id="addplan" class="boton boton-azul">Agregar</a>
</div>
<table id="tabla">
<thead>
<tr>
<th>Id</th>
<th>Plan</th>
<th>Valor</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody id="tablaplan">
</tbody>
</table>
</fieldset>