Ir para conteúdo
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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por leo_santo1
      Venho por meio desse post procurar ajuda com meu código!
      Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados.
      Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a  `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações.
      Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da  `DataTable` , aqui, porem não entendo bem o jeito que eles explicam.
      segue abaixo meu código da table e da  `DataTable` que conecta com o Banco.
       
      Tabela
      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th>Nome</th> <th>CPF</th> <th>Data de Nascimento</th> <th></th> <th>Ação</th> <th></th> </tr> </thead> <thead> <tr> <td><input type="text" data-column="0" class="search-input-text" style="width: 150px;"></td> <th><input type="text" data-column="1" class="search-input-text" style="width: 150px;"></td> <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th> <th></th> <td> </td> <td></td> </tr> </thead> </table> Script DataTable
      $(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "bJQueryUI": true, "oLanguage": { "sProcessing": "Processando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "Não foram encontrados resultados", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando de 0 até 0 de 0 registros", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "oPaginate": { "sFirst": "Primeiro", "sPrevious": "Anterior", "sNext": "Seguinte", "sLast": "Último" } }, "ajax":{ url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } ); Conexão DataTable com o Banco de dados
      <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "loc_equipamentos"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData= $_REQUEST; $columns = array( 0=>'nome_usuario', 1=> 'cpf_usuario', 2=> 'data_nascimento', 3=> 'id_usuario', 4=> 'id_usuario', 5=> 'id_usuario' ); $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario"; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; . $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'"; if( !empty($requestData['columns'][0]['search']['value']) ){ $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' "; } if( !empty($requestData['columns'][1]['search']['value']) ){ $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' "; } if( !empty($requestData['columns'][2]['search']['value']) ){ //age $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' "; } $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $data = array(); while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $informacao ="<div class='botaodiv'> <a href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>"; $editar ="<div class='botaodiv'> <a href = ?editar=".$row['id_usuario']." >Editar</a> </div>"; $deletar ="<div class='botaodiv'> <a href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>"; $nestedData[] = $row["nome_usuario"]; $nestedData[] = $row["cpf_usuario"]; $nestedData[] = $row["data_nascimento"]; $nestedData[] = $informacao; $nestedData[] = $editar; $nestedData[] = $deletar; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?> Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!  
    • Por anepri
      Preciso fazer uma página de consulta onde selecionando a cidade traga como resultado estabelecimentos comerciais daquela cidade. O exemplo do código que estou usando funciona perfeitamente com países, estados e cidade, mas na hora que faço a função "lojas", mesmo o código sendo idêntico não aparece o resultado. O que tem me deixado doida é que os primeiros select funcionam, mas o último "lojas" não funciona de jeito nenhum! Alguém pode olhar o código e me dizer onde estou pecando?
       
      $(function(){ // Pais function pais(){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'pais' }, dataType: 'json', success: function(data){ console.log(data); for(i = 0; i < data.qtd; i++){ $('select[name=pais]').append('<option value="'+data.id[i]+'">'+data.pais[i]+'</option>'); } } }); } pais(); function estado(pais){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'estado', id: pais }, dataType: 'json', beforeSend: function(){ $('select[name=estado]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=estado]').html(''); $('select[name=estado]').append('<option>Selecione o estado</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=estado]').append('<option value="'+data.id[i]+'">'+data.estado[i]+'</option>'); } } }); } // Cidade function cidade(estado){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'cidade', id: estado }, dataType: 'json', beforeSend: function(){ $('select[name=cidade]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=cidade]').html(''); $('select[name=cidade]').append('<option>Selecione a cidade</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=cidade]').append('<option value="'+data.id[i]+'">'+data.cidade[i]+'</option>'); } } }); } function contrubuinte(cidade){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'contrubuinte', id: cidade }, dataType: 'json', beforeSend: function(){ $('select[name=contrubuinte]').html('<option>Carregando...</option>'); }, success: function(data){ console.log(data); $('select[name=contrubuinte]').html(''); $('select[name=contrubuinte]').append('<option>Selecione a contrubuinte</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=contrubuinte]').append('<option value="'+data.id[i]+'">'+data.contrubuinte[i]+'</option>'); } } }); } $('select[name=pais]').change(function(){ var id = $(this).val(); estado(id); }); $('select[name=estado]').change(function(){ var idEstado = $(this).val(); cidade(idEstado); }); $('select[name=cidade]').change(function(){ var id = $(this).val(); contrubuinte(id); }); }); <?php require("config.php"); $retorno = array(); if($_GET['acao'] == 'pais'){ $sql = $pdo->prepare("SELECT * FROM pais"); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['pais'][$n] = $ln->pais; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'estado'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM estados WHERE id_pais = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['estado'][$n] = $ln->estado; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'cidade'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM cidades WHERE id_estado = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['cidade'][$n] = $ln->cidade; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'contribuinte'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM contribuinte WHERE id_cidade = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['contribuinte'][$n] = $ln->contribuinte; $retorno['id'][$n] = $ln->id; $n++; } } die(json_encode($retorno)); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="pais"> <option>Selecione o Pais</option> </select> <select name="estado"> <option>Selecione o Estado</option> </select> <select name="cidade"> <option>Selecione a Cidade</option> </select> <select name="contribuinte"> <option>Selecione o Contribuinte</option> </select> <script src="jquery.js"></script> <script src="funcoes.js"></script> </body> </html>  
×

Informação importante

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