0

Tenho este código que gera uma lista de itens em forma de input:

if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
    echo "
        <tr>
            <tr>
            <td><input type='number'
                        name='idrequisicao'
                        min='0'
                        max='999999'
                        readonly='readonly'
                        value=". $row["idsolicitacao"] .">
            </td>

            <td><input type='text'
                        name='descmaterial'
                        readonly='readonly'
                        value=". $row["descmaterial"] .">
            </td>

            <td><input type='number'
                        name='quantidade'
                        id='quantidade$n'
                        min='0'
                        max='9999999'
                        readonly='readonly'
                        value=". $row["quantidade"] .">
            </td>

            <td><input type='number'
                        name='valunit'
                        id='valunit$n'
                        min='0'
                        max='9999999999'>
            </td>

            <td><input type='number'
                        name='total'
                        id='total$n'
                        min='0'
                        max='999999'
                        readonly='readonly'
                        value=". $row["total"] .">
            </td>
        </tr>
    ";      
    $n += 1;

Ele faz o que eu preciso, mas o meu problema está no jQuery, assim que o usuário inserir o valor dentro do input valunit(valor unitário) ele multiplica pela quantidade trazendo o valor total no input de valor total, mas o código que consegui fazer até agora é estático e não consegui pensar em algo para torná-lo dinâmico:

$(document).ready(function(){
$('#valunit0').on('keyup', function() {
    var vunit = parseFloat($('#valunit0').val() != '' ? $('#valunit0').val() : 0);
    var qtd   = parseFloat($('#quantidade0').val() != '' ? $('#quantidade0').val() : 0);
    $('#total0').val(vunit*qtd);
})

$(document).ready(function(){
$('#valunit1').on('keyup', function() {
    var vunit = parseFloat($('#valunit1').val() != '' ? $('#valunit1').val() : 0);
    var qtd   = parseFloat($('#quantidade1').val() != '' ? $('#quantidade1').val() : 0);
    $('#total1').val(vunit*qtd);
})

$(document).ready(function(){
$('#valunit2').on('keyup', function() {
    var vunit = parseFloat($('#valunit2').val() != '' ? $('#valunit2').val() : 0);
    var qtd   = parseFloat($('#quantidade2').val() != '' ? $('#quantidade2').val() : 0);
    $('#total2').val(vunit*qtd);
})

Existe alguma maneira de tornar este código dinâmico para que não seja necessário modificar o jQuery para cada item que for apresentado? Aceito sugestões em outras linguagens se necessário. Obrigaduuu!

2
  • O que você já tentou? 19/01/2021 às 13:02
  • Tentei gerar sem a variavel $n no php, porém, desta forma, apenas o primeiro input realizava o cálculo. 19/01/2021 às 13:04

1 Resposta 1

1

Dentro do while, utilize classses com o mesmo nome:

            <td><input type='number'
                        name='quantidade'
                        id='quantidade-<?= $n ?>'
                        min='0'
                        max='9999999'
                        readonly='readonly'
                        value=". $row["quantidade"] .">
            </td>

            <td><input type='number'
                        class="valores"
                        name='valunit'
                        id_registro='<?= $n ?>'
                        min='0'
                        max='9999999999'>
            </td>

            <td><input type='number'
                        name='total'
                        id='total-<?= $n ?>'
                        min='0'
                        max='999999'
                        readonly='readonly'
                        value=". $row["total"] .">

No javascript, referencie a classe no evento de keyup, utilizando o atributo id_registro para saber quais inputs utilizar na hora do cálculo:

$(document).ready(function(){
$('.valores').on('keyup', function() {
    var id = $(this).attr('id_registro');
    var vunit = parseFloat($(this).val() != '' ? $(this).val() : 0);
    var qtd   = parseFloat($('#quantidade-' + id).val() != '' ? $('#quantidade-' + id).val() : 0);
    $('#total-' + id).val(vunit*qtd);
})
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .