I am making a table where I get some data from the bdd
using fetch,
what the table does is a select
that chooses a tipo
user so to speak, and gets a value in the same row ( sueldo mensual
image), which I then want to multiply by the amount that I enter.
The multiplication is done correctly as long as:
- first choose one of the options
select
and then enter thevalor
amount
The problem is that if in one case, the client wants to change the option, select
he must re-enter the value to multiply (quantity) so that the values are updated.
where the problem grows because at least 5 to 20 rows are entered.
This is my code that I am working with to get data withfetch
Table:
<tbody>
<tr>
<td>
<select id="select_opcion_{{$cant}}" onchange="OpcionChange('select_opcion_{{$cant}}', 'select_escoger_{{$cant}}')" onkeyup="Total_manobra();">
<option value="">Seleccionar...</option>
//aquí va un foreach con los identificador para solicitar el valor
</select>
</td>
<td>
<input type="number" class="cantidad_obra" onkeyup="Total_manobra();">
</td>
<td class="p-d" id="select_escoger_{{$cant}}">
<input type="number" class="valor_obra" onkeyup="Total_manobra();">
</td>
<td>
<input type="number" class="total_obra" onkeyup="Total_manobra();">
</td>
</tr>
</tbody>
Image of how it really is:
the code with which I obtain the data that I request from the bdd
:
function OpcionChange(identidad, receptor){
var valor = document.getElementById(identidad).value;
fetch('/consulta'+valor+'/opcion').then((response) => response.json()).then((response)=>{
document.getElementById(receptor).innerHTML=`<input type="number class="valor_obra" onkeyup="Total_manobra" value="${response.RMU}">`
})
}
What I tried to do was use the ones event
from javascript
(which I know and its function), but the ones used gave me these problems:
onchange="Total_manobra();
= calculates the previous value for me, not the requested one.
onclick="Total_manobra();"
= Well, it worked, but only if I clicked again on the select
, well sometimes in any case, it is not recommended because the user is not always the same, and the client (the boss) does not want that.
onkeyup="Total_manobra();"
= just doesn't work.
so I'm asking for help to see if there is any way to do that without problem.
I do not add the multiplication code because I think that is not the problem. I will add it if necessary.
If you search by the id
receptor
you can do something likeOnce the value has been modified asynchronously, you can call the Total_manobra function and you will have the updated value, instead of the calculation with the previous value.
To avoid AJAX requests every time changes are made in the select I recommend you use data attributes (dataset) that you can apply to each option and only the function
Total_manobra()
to listen and apply changes remains.The event will always be sent to functions, even if you don't specify it. Take advantage of that: