Enviar Valor Somado em Input

[juliosertori 0]

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?

[Omar~ 87]

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

[juliosertori 0]

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

 

 

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.

[Omar~ 87]

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.

 

[juliosertori 0]

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

[juliosertori 0]

Acho que entendi o que você quis dizer, posso sempre somar com o campo TOTAL que vier né, fazendo sempre o += NOVO VALOR. Vou testar

[juliosertori 0]

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!

[Omar~ 87]

3 horas atrás, Omar~ disse:

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

 

Seria isso? heheh....

 

[juliosertori 0]

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?

[juliosertori 0]

Em 17/07/2018 at 03:28, Omar~ disse:

 

Seria isso? heheh....

 

 

Será que você tem uma ideia amigo?

[Omar~ 87]

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>