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 dba.amaro
      Galera, bom dia/tarde/noite, 
       
      Estou desenvolvendo uma aplicação web, porém preciso mostrar algumas informações e os objetos vão mudar de cor / porcentagem, segundo as informações que estão contidas no banco de dados, 
       
      Tenho, algumas ideias, porém não sei nem por onde começar, se alguém puder ajudar, agradeço !!
       
      Um abraço  a todos e bons posts!
    • Por Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
    • Por Claudia França
      Prezados há dias consegui chegar no fim do projeto e, agora resta apenas corrigir o erro que ocorro no fim da transação. "Atualizar informações de pagamento. "
       Eu tenho aqui a doc. Mas não seu exatamente o que alterar no código para corrigir isso. E preciso de ajuda,
       
      https://www.userede.com.br/desenvolvedores/pt/produto/e-Rede#documentacao-3ds
       
      function updatePaymentAPI($apikey, $secret, $callid, $currencyCode,$total, $subtal){
          $time = time();
          $query_string = "apikey=".$apikey;
          $resource = "payment/info/".$callid;
          $body = "{\"updateInfo\":[{\"payInfo\":{\"reason\":\"ProductionKey Test\",
          \"avsResponseCode\":\"Y\",\"total\":".$total.",\"currencyCode\":\"".$currencyCode."\",
          \"eventStatus\":\"Success\",\"eventType\":\"Authorize\"}},{\"orderInfo\":{\"currencyCode\":\"".$currencyCode."\",
          \"discount\":0,\"eventType\":\"Confirm\",\"giftWrap\":0,\"misc\":0,
          \"reason\":\"Order_placed\",\"shippingHandling\":0,\"subtotal\":".$subtal.",\"tax\":0,\"total\":".$total."}}]}";
          $certificatePath = 'cert.pem';
          $privateKey = 'key_9e082920-8ec4-441a-8cfa-588b0829d326.pem';
          //Hash for x-pay-token
          $token = $time.$resource.$query_string.$body;
          $hashtoken = "xv2:".$time.":".hash_hmac('sha256', $token, $secret); //X-PAY-TOKEN String
          //$url = "https://api.visa.com/wallet-services-web/".$resource."?".$query_string;
          $url = "https://api.visa.com/wallet-services-web/".$resource."?".$query_string;
          updatePaymentLog("=========================================\n\n");
          updatePaymentLog("CallID : ".$callid."\n");
          updatePaymentLog("URL : ".$url."\n\n");
          updatePaymentLog("Update Payment Request Parameters : \n");
          updatePaymentLog($body);
          //Header
          $header = (array("X-PAY-TOKEN: ".$hashtoken, "Accept: application/json", "Content-Type: application/json","X-FRAME-OPTIONS: SAMEORIGIN"));
          $ch = curl_init();
          curl_setopt($ch, CURLOPT_URL, $url);
          curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
          curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
          curl_setopt($ch, CURLOPT_SSLVERSION , 1);
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
          //curl_setopt($ch, CURLOPT_SSLCERT, $certificatePath);
          //curl_setopt($ch, CURLOPT_SSLKEY, $privateKey);
          curl_setopt($ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4);
          curl_setopt($ch, CURLOPT_POSTFIELDS,$body);
          //getting response from server
          $response = curl_exec($ch);
          if(!$response) {
              die('Error: "' . curl_error($ch) . '" - Code: ' . curl_errno($ch));
          }
          $statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
          curl_close($ch);
          $json = "";
          $ret = array(
            'status' =>"",
            'data' => ""
          );
          if($statusCode == 200) { //If success => empty Object.
              $ret['status'] = 'success';
              updatePaymentLog("\nUpdate Payment Info called Successfully...\n");
          }else{ // Return Error Object
              $ret['status'] = 'fail';
              $ret['data'] = $response;
              updatePaymentLog("\nSomething Went Wrong....\n");
              $json = json_decode($response);
              $json = json_encode($json, JSON_PRETTY_PRINT);
          }
          updatePaymentLog("\nStatus Code : " . $statusCode ."\n");
          updatePaymentLog($json);
          updatePaymentLog("\n");
          echo json_encode($ret);
      }
      updatePaymentAPI($visaApiKey, $sharedSecret, $callid, $currencyCode, $total, $subtotal);
      ?>
       
       
       
       
       
    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
×

Informação importante

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