-2

Tenho um formulário com quatro campos numéricos, ncr11, ncr22, ncr33 e ncr44. Ainda há outro campo no formulário, ncr, que receberá um valor total, que corresponde à soma de todos os quatros primeiros campos. A soma eu fiz com PHP e fui informado em outra pergunta que deveria manter o action do formulário em branco e executar o código na mesma página, porém, ao atualizar a página, meu campo resultado sempre acaba ficando em branco.

O que eu gostaria de fazer é que quando o usuário entrasse com os valores, o campo resultado fosse atualizado automaticamente.

<?php
$crTot = "";
if($_POST){
    $cr1 = $_POST['ncr11'];
    $cr2 = $_POST['ncr22'];
    $cr3 = $_POST['ncr33'];
    $cr4 = $_POST['ncr44'];
$crTot = $cr1+$cr2+$cr3+$cr4;
echo $crTot;
}
?>

<form method="post" action="">
<div id="circulantes">
    <div class="ativocirculante" id="ativocirculante">
        <h2>ATIVO CIRCULANTE<input type="text" placeholder="R$ 0,00" id="ac" readonly/></h2>
        <h4>Ativo Errático (Financeiro) <input type="text" placeholder="R$ 0,00 aplicações" id="ae"/></h4>
        <h4>Disponíveis (Caixa e Bancos)<input type="text" placeholder="R$ 0,00" id="disp"/></h4>
        <h3>ACO<input type="text" placeholder="R$ 0,00" id="aco" readonly/></h3>
        <h4>Contas a receber<input type="text" placeholder="R$ 0,00" id="cr" name="ncr" value="<?php echo $crTot;?>" readonly/></h4>
        <h4 id="cr1">Até 30 dias<input type="text" placeholder="R$ 0,00" id="cr11" name="ncr11"/></h4>
        <h4 id="cr2">31 a 60 dias<input type="text" placeholder="R$ 0,00" id="cr22" name="ncr22"/></h4>
        <h4 id="cr3">61 a 90 dias<input type="text" placeholder="R$ 0,00" id="cr33" name="ncr33"/></h4>
        <h4 id="cr4">Acima de 90 dias<input type="text" placeholder="R$ 0,00" id="cr44" name="ncr44"/></h4>
        <h4>Estoque<input type="text" placeholder="R$ 0,00" id="est"/></h4>
        <h4>Adiantamento a Fornecedores<input type="text" placeholder="R$ 0,00" id="af"/></h4>
        <h4>Despesas antecipadas<input type="text" placeholder="R$ 0,00" id="da"/></h4>
</div>
11
  • 1
    Essas somas no $crTot não vão funcionar bem se o que está escrito nas caixas segue o formato R$ X,XX
    – Isac
    Commented 2/10/2017 às 12:46
  • Bruce, por favor, leia o guia de Como perguntar o mais rápido possível. Eu abri um debate no Meta para discutir o caso da sua outra pergunta, pois não era clara mas foi respondida.
    – Woss
    Commented 2/10/2017 às 12:48
  • Essa página é para trazer resultados correto ? Mas qual o seu script antes dessa página, que trás "envia" os dados em POST ? Ou na verdade, você teria que usar o GET se trouxer na URL
    – rbz
    Commented 2/10/2017 às 12:54
  • Pode por favor detalhar o erro? Que mensagem dá? o que vem no retorno... Commented 2/10/2017 às 12:55
  • Basicamente, estou criando uma forma do usuário ao digitar os valores dentro das inputs (ncr11 até ncr44) ela retorne a soma destas dentro da input (ncr). O problema é que quando carrego a página e digito valores testes dentro das inputs mencionadas, a input "ncr" fica em branco... Quando uso if (isset($_POST){...} a página retorna Notice: Undefined index: ncr11 in C:\xampp\htdocs\menuVertical\apCirculantes.php on line 20 Notice: Undefined index: ncr22 in C:\xampp\htdocs\menuVertical\apCirculantes.php on line 21 Commented 2/10/2017 às 13:02

1 Resposta 1

1

1 - Define uma máscara fixa para os campos de valor, use o plugin jQuery Input Mask , ou use o input com type='number', mas isso não funciona em vários navegadores, para travar um formato para número recomendo o plugin.

2 - Action em branco indica que você não usa jQuery/Ajax para submeter e quer que ele envie para a mesma página, então o PHP que recebe o $_POST deve ficar no topo do arquivo.

3 - Como disse no '1', para funcionar você precisa de um padrão, ou seja, sempre 'RS10,00', ou '10,00', ou '10.00', não importa qual formato, o que importa é que input tenha sempre o mesmo formato.

Supondo que o seu input teria o formato 'RS10.00', use str_replace() par remover o 'R$' e number_format() para formatar a string em um número decimal:

<?php

$crTot = "";
if($_POST){
    $cr1 =  number_format(str_replace('R$', '', $_POST['ncr11']), 2, '.', ' ');
    $cr2 =  number_format(str_replace('R$', '', $_POST['ncr22']), 2, '.', ' ');
    $cr3 =  number_format(str_replace('R$', '', $_POST['ncr33']), 2, '.', ' ');
    $cr4 =  number_format(str_replace('R$', '', $_POST['ncr44']), 2, '.', ' ');
    $crTot = $cr1+$cr2+$cr3+$cr4;
    echo $crTot;
}
?>

E para colocar esse valor dentro do input (você fez certo):

<input type="text" placeholder="R$ 0,00" id="cr" name="ncr" value="<?php echo $crTot;?>" readonly/>

Como atualizar automaticamente com JS:

Você precisa primeiro, adicionar alguns identificadores classnames aos elementos abaixo:

<input type="text" placeholder="R$ 0,00" id="cr" name="ncr" value="" class='ncrTot' readonly/>
<h4 id="cr1">Até 30 dias<input type="text" placeholder="R$ 0,00" id="cr11" name="ncr11" class='ncr11 ncr_value'/></h4>
<h4 id="cr2">31 a 60 dias<input type="text" placeholder="R$ 0,00" id="cr22" name="ncr22" class='ncr22 ncr_value' /></h4>
<h4 id="cr3">61 a 90 dias<input type="text" placeholder="R$ 0,00" id="cr33" name="ncr33" class='ncr33 ncr_value' /></h4>
<h4 id="cr4">Acima de 90 dias<input type="text" placeholder="R$ 0,00" id="cr44" name="ncr44" class='ncr44 ncr_value' /></h4>

Repare que foi aidicionado um classname 'ncr_value' aos 4 campos em questão.

Agora, para colocar um máscara que manterá um padrão ao valor, vamos usar o plugin jqueryinputmask, basta coloca isso dentro do '<head>' de sua página junto com o jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous"></script>

Agora, pra aplicar a máscara, insira o seguinte código em seu arquivo:

$('.ncr_value').inputmask('decimal', {
                'alias': 'numeric',
                'groupSeparator': ',',
                'autoGroup': true,
                'digits': 2,
                'radixPoint': ".",
                'digitsOptional': false,
                'allowMinus': false,
                'prefix': 'R$ '
    });

Se tudo ocorreu certo, nesse ponto você terá input com formato 'R$00.00'.

Agora, pra fazer o calculo, existem diversas formas, no exemplo, será usado um loop pelos inputs, e evetuando uma soma dinamica:

//Indica para efetuar a soma quando for pressionado um botão com foco no input, quando o valor for alterado, ou qunado o foco seguir em diante
$(document).on('keyup blur change','.ncr_value',function(){
        var v = 0;  
        //Inicia o loop pelos cmapos
        $('.ncr_value').each(function(b,c) {   
        if ($(c).val()) {
        //Remove o 'R$' para converter em numero
        var a = $(c).val().replace('R$','');
        //Susbtitui a virgula padrão de milhares por nada para somar corretamente
        var b = a.replace(',','');
        //Usa o += para somar os valores
        v += parseFloat(b);
        }
    });
    //Preenche o elemento com classname 'ncrTot' com o resultado da soma.
    $('.ncrTot').val('R$' + v.toFixed(2));
});

Tentei explicar de forma simples um modo de se fazer isso, não sei se ficou tão simples, da pra melhorar e muito, segue um exemplo funcionando no fiddle:

https://jsfiddle.net/jd8zz2kb/1/

3
  • Perfeito, já alterei da forma que você sugeriu. Aguardo novas instruções. Commented 2/10/2017 às 14:13
  • @BruceDuarte da uma olhada vc da pra entender agora. Commented 2/10/2017 às 15:03
  • Funcionou perfeitamente, muito obrigado. Commented 2/10/2017 às 15:37

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 .