0

Não tenho grande conhecimento de js, então preciso de uma ajuda. Tenho uma pagina que gera um formulario com um mapa de cotação, em colunas (cada fornecedor em uma coluna), e preciso que ao usuario selecionar os checkbox ele faça a soma on-line pois cada fornecedor tem um valor mínimo para poder autorizar o faturamento.

A questão é que o script usa o name=dias[] em todos os checkbox, e preciso de um nome diferente para cada fornecedor, isso eu consigo fazer pelo php com uso de variáveis, mas como eu faço para que o js consiga criar multiplos códigos pegando o nome da minha variavel do checkbox ?

Parte do código php que gera o resultado e os checkbox:

        #Monta listagem de valores referente ao produtos

        //selecionando os valores    
        $sqlValores = "SELECT v.total, id_precos, v.preco
                       FROM tbl_cot_precos AS v
                       WHERE id_produto = '" .$produtos['produtosCod'][$i]. "'
                       AND v.id_pedido =$id_pedido";            
        $resValores = mysql_query($sqlValores);




        while ($listaValores = mysql_fetch_array($resValores))
        {
            //exibe valores

            echo '<td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_unit" value="' .number_format($listaValores[2], 2, ',', '.'). '" readonly="readonly"></td>
                  <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_total" value="' .number_format($listaValores[0], 2, ',', '.'). '" readonly="readonly"></td>
                  <td style="display:none;"><input type="hidden" name="produto_id_'.$listaValores[1].'" value="'.$listaValores[1].'"></td>
                  <td style="display:none;"><input type="hidden" name="pedido" value="'.$id_pedido.'"></td>
                  <td><input type="checkbox" class="dias" name="dias[]" value="'.$listaValores[0].'"></td>';    

        }


        $i++;
        #Fim monta listagem de preços referente ao produtos

    echo '</tr>';

js que faz a soma on-line dos checkbox que são clicados:

    <script type="text/javascript">
        jQuery(function() {
        $(document).ready(function() {
           $(".dias").change(function() {
              var total = $('input[class="dias"]:checked').get().reduce(function(tot, el) {
              return tot + Number(el.value);
           }, 0);
           $('#resultado').val(total);
         });
       });
     });
    </script>
5
  • Você precisa criar muitos código e pretende armazenar onde? Primeiro em array ou direto no banco de dados? 18/05/2020 às 19:02
  • Onde entra a identificação de cada fornecedor nisso?
    – Sam
    18/05/2020 às 19:27
  • Os dados dos fornecedores e os preços de cada um já ficam no BD, nessa rotina eu apenas demonstro para o usuário, a questão é que como ele pode comprar produtos de vários fornecedores, preciso que ele ao escolher faça a soma e confronte com a informação de valor mínimo de compra. Então precisa que o JS conseguisse pegar o ID do checkbox de cada fornecedor, o nome do ID do checkbox eu consigo por exemplio atribuir o codigo do fornecedor, mas como o JS vai saber esse nome ? 18/05/2020 às 19:45
  • Aqui no código eu posso acrescentar o codigo do fornecedor no BD <td><input type="checkbox" class="dias" name="dias_$id_fornecedor[]" value="'.$listaValores[0].'"></td>'; 18/05/2020 às 19:46
  • Voce quer o nome do check para atribuir o código? 18/05/2020 às 19:59

2 Respostas 2

0

Fiz um exemplo básico para você dar uma analisada

Olha só:

Criei um vetor chamado: codigo que vai armazenar somente os códigos

Ao clicar, ele faz a soma dos totais e exibe em local

Daí você pode pegar o exemplo e vê se te ajuda

Segue o código abaixo:

var codigo = []

$('.dias').on('change', function(){
      
      var values = 0.00;
      let id = $(this).closest('tr').find( '.id' ).text()
      var total = $('input[class="dias"]:checked').get().reduce(function(tot, el) {
              return tot + Number(el.value);
           }, 0);
      $('span').text( 'Soma total: '+total ) 
      let _id = codigo.indexOf( id )
      if( $(this).is(':checked') ) {
         if( ( _id == -1 ) ) {
            codigo.push( id )
         }
      }else{
        codigo.splice( _id, 1 )  
      }
      
      console.log( 'codigos', codigo )
      
      
    
      
 })
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<span></span>

<table>
  <thead>
     <tr>
        <th>Valor</th>
        <th>Id</th>
        <th></th>
     </tr>
  </thead>
  <tbody>
  <tr>
         <td class="valor">200</td> 
         <td class="id">1</td> 
         <td><input type="checkbox" class="dias" name="dias[]" value="200"></td>  
  </tr>
  <tr>
         <td class="valor">300</td>  
         <td class="id">2</td> 
         <td><input type="checkbox" class="dias" name="dias[]" value="300"></td>  
  </tr>
  <tr>
         <td class="valor">600</td>  
         <td class="id">3</td> 
         <td><input type="checkbox" class="dias" name="dias[]" value="600"></td>  
  </tr>
  </tbody>
  </table>
        

0

Você pode criar um objeto com as somas para cada fornecedor diferente. Digamos que você coloque no name de cada checkbox um fornecedor diferente:

<input type="checkbox" class="dias" name="dias_f1[]" value="5">
<input type="checkbox" class="dias" name="dias_f2[]" value="2">
<input type="checkbox" class="dias" name="dias_f1[]" value="4">
<input type="checkbox" class="dias" name="dias_f2[]" value="1">

Repare que em cada checkbox acima existe uma diferenciação, onde f1 e f2 seriam os id's de cada fornecedor vindo do PHP:

name="dias_$id_fornecedor[]"

Com isso você consegue montar um objeto em JavaScript com a soma de cada checkbox checado separando os id's dos fornecedores. Digamos que foi checado todos os checkbox acima, irá resultar num objeto assim:

fornecedores = {
   f1: 9,
   f2: 3
}

Com esse objeto em mãos você poderá verificar os valores de cada entrada do objeto pelo id de cada fornecedor (f1, f2 conforme exemplo).

Seu código ficará assim:

$(function(){
   $(".dias").change(function(){

      var fornecedores = {};
      $('input.dias:checked').each(function(){
         var id_fornecedor = this.name.match(/dias_(.+?)\[\]/)[1];
         if(fornecedores[id_fornecedor]){
            fornecedores[id_fornecedor] += +this.value;
         }else{
            fornecedores[id_fornecedor] = +this.value;
         }
      });
      
      var total = $('.dias:checked').get().reduce(function(tot, el) {
         return tot + Number(el.value);
      }, 0);
      $('#resultado').val(total);
   });
});

Teste:

$(function(){
   $(".dias").change(function(){

      var fornecedores = {};
      $('input.dias:checked').each(function(){
         var id_fornecedor = this.name.match(/dias_(.+?)\[\]/)[1];
         if(fornecedores[id_fornecedor]){
            fornecedores[id_fornecedor] += +this.value;
         }else{
            fornecedores[id_fornecedor] = +this.value;
         }
      });
      console.log(fornecedores); // remova esta linha
      var total = $('.dias:checked').get().reduce(function(tot, el) {
         return tot + Number(el.value);
      }, 0);
      $('#resultado').val(total);
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_unit" value="' .number_format($listaValores[2], 2, ',', '.'). '" readonly></td>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_total" value="' .number_format($listaValores[0], 2, ',', '.'). '" readonly></td>
      <td style="display:none;"><input type="hidden" name="produto_id_'.$listaValores[1].'" value="'.$listaValores[1].'"></td>
      <td style="display:none;"><input type="hidden" name="pedido" value="'.$id_pedido.'"></td>
      <td><input type="checkbox" class="dias" name="dias_f1[]" value="3"></td>
   </tr>
   <tr>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_unit" value="' .number_format($listaValores[2], 2, ',', '.'). '" readonly></td>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_total" value="' .number_format($listaValores[0], 2, ',', '.'). '" readonly></td>
      <td style="display:none;"><input type="hidden" name="produto_id_'.$listaValores[1].'" value="'.$listaValores[1].'"></td>
      <td style="display:none;"><input type="hidden" name="pedido" value="'.$id_pedido.'"></td>
      <td><input type="checkbox" class="dias" name="dias_f2[]" value="2"></td>
   </tr>
   <tr>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_unit" value="' .number_format($listaValores[2], 2, ',', '.'). '" readonly></td>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_total" value="' .number_format($listaValores[0], 2, ',', '.'). '" readonly></td>
      <td style="display:none;"><input type="hidden" name="produto_id_'.$listaValores[1].'" value="'.$listaValores[1].'"></td>
      <td style="display:none;"><input type="hidden" name="pedido" value="'.$id_pedido.'"></td>
      <td><input type="checkbox" class="dias" name="dias_f1[]" value="5"></td>
   </tr>
   <tr>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_unit" value="' .number_format($listaValores[2], 2, ',', '.'). '" readonly></td>
      <td align="right"><input type="text" style="font-family: Tahoma; font-size: 10px" size="12" name="valor_total" value="' .number_format($listaValores[0], 2, ',', '.'). '" readonly></td>
      <td style="display:none;"><input type="hidden" name="produto_id_'.$listaValores[1].'" value="'.$listaValores[1].'"></td>
      <td style="display:none;"><input type="hidden" name="pedido" value="'.$id_pedido.'"></td>
      <td><input type="checkbox" class="dias" name="dias_f2[]" value="9"></td>
   </tr>
</table>
<input id="resultado">

Observações:

  • jQuery(function() { e $(document).ready(function() { é a mesma coisa. Não repita.
  • Esse seletor $('input[class="dias"]:checked') pode ser simplificado assim $('input.dias:checked').
3
  • Obrigado, mas vamos lá....me perdoe se deixei algum detalhe passar.Mas, mas ainda o elemento resultado está somando todos os checkbox, independente do nome. 20/05/2020 às 18:55
  • Ele gerou os nomes diferene, veja: td><input type="checkbox" class="dias" name="dias_9[]" value="300"></td></tr> td><input type="checkbox" class="dias" name="dias_6[]" value="300"></td></tr> Aonde 6 e 9 são od ids de cada fornecedor 20/05/2020 às 18:57
  • veja em : simpleprice.com.br/financeiro/… 20/05/2020 às 19:24

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 .