Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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?

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, Omar~ disse:

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

 

Seria isso? heheh....

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.