Jump to content
juliosertori

Enviar Valor Somado em Input

Recommended Posts

Olá boa noite, procurei e não encontrei algo relacionado.

 

Tenho um Input onde vou mostrar valores somados, e tenho outros input que tem os valores. Existe a possibilidade, de após um evento, ele mandar o valor do input de preços, a somar com o valor já existente ao input de total de valores?

Share this post


Link to post
Share on other sites

O ideal e correto é que você faça esse calculo no servidor, não o cliente faça esse calculo em seu navegador, pois o mesmo pode alterar os valores controlando o javascript ou mesmo o html.

 

No básico não entendi corretamente a questão que input some com o que, e que valor soma com input tal.

Entretanto respondendo a pergunta; você pode obter os valores dos inputs através do "value" do mesmo.

 

Veja um exemplo que fiz ligeiro aqui, onde pego o valor de um input já padrão e faço a soma com o que é digitado.

<input type="text" id="padrao" name="valor_padrao" value="125" />
<input type="text" id="soma" name="valor_soma" onkeypress="calcular()" />

<div id="mostra_resultado"></div>
<script>
  function calcular() {
    padrao = Number(document.getElementById('padrao').value);
    soma = Number(document.getElementById('soma').value);
    resultado = padrao + soma;
    if (isNaN(resultado)) {
      document.getElementById('mostra_resultado').innerHTML = 'Coloque só números';
    } else {
      document.getElementById('mostra_resultado').innerHTML = resultado;
    }
  }
</script>

 

No entanto como eu disse jamais enviaria o valor obtido pela VAR resultado para ser válida e sim faria isso no servidor onde eu posso ter a segurança desses dados. Veja um básico com php

<?php
$valor_padrao = (int) $_POST['valor_padrao'];
$valor_soma = (int) $_POST['valor_soma'];

$resultado = $valor_padrao + $valor_soma;

Lógico que deve-se tratar esses valores antes de calcular...

 

EDIT#

Se for o caso de vários inputs onde você deve ir somando seus valores.

Você pode criar uma var que armazena o total onde essa se incrementa com o valor do input atual.

variavel_total += valor_do_input_atual

Assim sendo se o total for 30 e o input atual for 50, a variável total passa a ser 80

Share this post


Link to post
Share on other sites

Entendi amigo, eu fazendo ajustes aqui vi que dessa forma não dará certo provavelmente, de uma olhada:

 

image.thumb.png.b674bf49c05dc436422f2cf20e94853c.png

 

Os campos de Preço e Quantidade já estão sendo calculados e colocados em um campo TOTAL como HIDDEN.

 

E tenho ali o INPUT VALOR TOTAL que preciso colocar o valor total desses INPUTS HIDDEN de cada linha, o problema que cada linha gera um TOTAL[0], TOTAL[1], e assim por diante, não estou sabendo como fazer para somar esses inputs de forma dinâmica.

Share this post


Link to post
Share on other sites

Certo, certo, não tem diferença na lógica

 

<!-- Digamos que você fez o calculo e preencheu o valor desse input, ou ele já tem um valor fixo -->
<input type="hidden" id="exemplo_1" value="10">
<!-- Digamos que você fez o calculo e preencheu o valor desse input, ou ele já tem um valor fixo -->
<input type="hidden" id="exemplo_2" value="20">

<p>Resultado</p>
<input id="resultado" type="text">

<script>
    resultado = 0; // Isso é para criar a variável inteira (deve ficar fora de um suposta função)

    exemplo_1 = Number(document.getElementById('exemplo_1').value);
    exemplo_2 = Number(document.getElementById('exemplo_2').value);
    resultado += (exemplo_1 + exemplo_2);

    /* Basta colocar preencher o value do input que quiser com a soma
     mesmo que ele esteja oculto */
    document.getElementById('resultado').value = resultado;
</script>

 

EDIT#

27 minutos atrás, juliosertori disse:

TOTAL[0], TOTAL[1], e assim por diante, não estou sabendo como fazer para somar esses inputs de forma dinâmica

 

resultado += TOTAL[0];

resultado += TOTAL[1];

 

Então você faz o quem querer com o resultado. Pode preenche um input com ele exibir ou calcular mais coisas.

 

Share this post


Link to post
Share on other sites

Então amigo, mas no caso o problema está sendo no ID ou Name do INPUT, se deixar todos com ID repetido, ( não testei ainda e não sei se funciona ) para somar, ou tem a questão do NAME do INPUT que está com ARRAY, como posso pegar os valores desse INPUT

 

8 minutos atrás, Omar~ disse:

resultado += TOTAL[0];

resultado += TOTAL[1];

 

Então amigo, o problema é que não tenho apenas 2 campos, ele insere dinamicamente, eu poderia fazer uma gambiarra, e colocar um looping com uma quantidade que sei que não iria utilizar, mas queria algo mais estável

Share this post


Link to post
Share on other sites

Amigo deu certo dessa forma:

 

function atualizaTotalPrecos(){

	var total = 0;
	
    $('.somaTotal').each(function(){
      var valor = Number($(this).val());

      if (!isNaN(valor)) total += valor;
    });

    $(".SomaTotalPrecos").val("R$ " +total+ ".00");


 };

Só que eu gostaria de fazer isso sem o ONBLUR, gostaria de ao digitar o valor no campo ele já atualizar enquanto digita, pois o cliente pode clicar para submeter o formulário sem antes clicar fora do INPUT. Conhece alguma forma?

 

Obrigado!

Share this post


Link to post
Share on other sites
3 horas atrás, Omar~ disse:

<input type="text" id="soma" name="valor_soma" onkeypress="calcular()" />

 

Seria isso? heheh....

 

Share this post


Link to post
Share on other sites

Então amigo, por algum motivo, o onkeypress não funciona, tentei com onkeyup, mas o problema é que só funciona no segundo caractere inserido.

 

Eu insiro 1, ele não calcula, eu apago ele calcula, eu insiro 2, não calcula, se apago e insiro 1, ele calcula com 2, não entendi ainda, já passou por isso?

Share this post


Link to post
Share on other sites

Tenta usar oninput

 

Em 17/07/2018 at 10:27, juliosertori disse:

já passou por isso?

Não porque não uso e detesto jquery e jamais em hipótese alguma chegaria a usar...

 

 

Então não sou o mais indicado para lhe ajudar.

 

No caso de usar javascript ao invés de jquery eu faria mais ou menos assim:

JavaScript:

Spoiler

var SomaDePrecos = function () {

    /*
     * Pegar todos os inputs cujo sua className seja "exemplo"
     */
    var inputs = document.getElementsByClassName('exemplo');

    /*
     * Percorrer do DOM em busca de todos os input.class = 'exemplo'
     */
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('input', function (event) {
            digitando(event.currentTarget);
            soNumeros(event.currentTarget);
        });
    }

    /*
     * Onde o resultado do calculo será mostrado no DOM
     */
    var resultado = document.getElementById('resultado');

    /*
     * Isso é para armazenar o valor do total atual
     */
    var total = 0;

    /*
     * Pega a Chave digitada no input
     * Passa uma expressão regular para somente computar STR de 0 ao 9
     * Removendo assim espaços, acentos, pontos etc...
     */
    function soNumeros(event) {
        soNumeros.prototype = new RegExp('[^0-9]', 'g');
        event.value = inteiro(event.value);
    }

    /*
     * Quando uma chave é digitada
     */
    function digitando(event) {
        total += inteiro(event.value);
        // Exibe o resultado
        // Se for o caso de um input substitua atribuindo a value do input
        resultado.textContent = eval(total);
    }

    /*
     * Converte STRING de um input text para INTEGER
     * * Obs.:: Quando não passar pela expressão do soNumeros()
     * o resultado é NaN então trata o NaN como sendo o valor 0
     */
    function inteiro(value) {
        var number = value.replace(soNumeros, '');
        number = parseInt(number);
        if (isNaN(number)) {
            number = 0;
        }
        return number;
    }
};

 

Nota.: Isso é só um básico, faltou métodos para limpar os inputs em caso de recarregamento da página, e detectar quando o valor de um input é diminuído, ou mesmo apagado fazendo a subtração do total armazenado em memória.

 

No html ficaria assim:

Spoiler

<input class="exemplo" type="text" value="0"/>

<input class="exemplo" type="text" value="0"/>

<input class="exemplo" type="text" value="0"/>

<input class="exemplo" type="text" value="0"/>

<span id="resultado"></span>

<script>var soma = new SomaDePrecos();</script>

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By frodrigues49
      function getProduto(a){ var a = $(a) var idproduto = a.parent().parent().parent().find(".idproduto"); var produto = a.parent().parent().parent().find(".produto"); var preco = a.parent().parent().parent().find(".preco"); var vId = idproduto.val(); var vProduto = produto.val(); var vPreco = preco.val(); var vQnt = 1; var vTotal = (parseFloat(vQnt) * parseFloat(vPreco)); var prodAdd = false; $(".id").each(function(index, value) { if ($(value).val() == vId) { $('input[id^="pqnt"]').get(0).value++ ; prodAdd = true; } }); if (!prodAdd) { var cont=0; var linha = '<tr class="selected" id="linha'+cont+'">'+ '<td>'+ '<input class="id" type="hidden" name="idproduto[]" value="'+vId+'">'+vProduto+ '</td>'+ '<td>'+ '<input id="preco" type="text" class="form-control text-right" name="preco[]" value="'+vPreco+'" onblur="multiplicar();" onblur="formatar();">'+ '</td>'+ '<td>'+ '<input id="pqnt" type="text" class="form-control text-center" name="qnt[]" value="'+vQnt+'"><span class="vlr">'+ '</td>'+ '<td>'+ '<input style="text-align: right;" id="subtotal" class="form-control subtotal" type="hidden" value="'+vTotal+'" readonly onblur="calcular();">'+ '<input style="text-align: right;" type="text" class="form-control subtotalT" id="subtotalT" name="subtotal[]" value="'+numberToReal(vTotal)+'" readonly>'+ '</td>'+ '<td class="text-center">'+ '<a style="cursor:pointer" onclick="deleteRow(this)" class="glyphicon glyphicon-trash"></a>'+ '</td>'+ ' </tr>' cont++; $('#mytbody').append(linha); contItem(); calcular(); $(".subtotal").each(function() { $(this).blur(function(){ calcular(); }); }); } } Boa tarde
       
      Estou fazendo um projeto em laravel de um pdv. Gostaria de quando clicar na imagem do pruduto ele inserisse na lista, porem ao clicar novamente ele aumentasse a qnt e nao inserisse. Conforme imagem em anexo.

    • By David Samu
      let total_entradas = 3//ai virar total de colunas
      let total_linhas   = 0
      let tabela         = []
      for(let coluna=total_entradas; coluna>0; coluna-- )
      {
          let repeticao = 1
          for(let x=1; x<=coluna; x++)
          {
              repeticao = (2 * repeticao)
          }
          if( total_linhas === 0 )
          {
              total_linhas = repeticao
          }
          if(repeticao != 1) 
          {
              repeticao = (repeticao / 2)
          }
          let valores = []
          let vdd     = 1
          let lastBoo = 'v'
          for( let linha=0; linha < total_linhas; linha++ )
          {
              if( vdd <= repeticao )
              {
                  val = lastBoo
              }
              else
              {
                  if( lastBoo == 'v' )
                  {
                      lastBoo = 'f'  
                  }
                  else 
                  {
                      lastBoo = 'v'
                  }
                  val = lastBoo
                  vdd=1
              }
              vdd++
              valores.push(val)
          }
          tabela[ (coluna - 1) ] = valores   
      }
      let countCol = 1
      for(let coluna=tabela.length - 1; coluna>=0; coluna--)
      {
          console.log("Coluna ", countCol++)
          for(let linha = 0; linha < tabela[coluna].length; linha ++)
          {
              console.log( tabela[coluna][linha] )
          }
      }
    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By Wilson Fernandes
      Olá! Preciso de ajuda para começar a construir gráficos de funções quadráticas em plano cartesiano. Já procurei várias fontes, mas nenhuma explica como construir um bom gráfico.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.