Ir para conteúdo
Gilberto Jr

Soma de Valores Ao mudar de Campo

Recommended Posts

Pessoal, boa noite;

 

Eu tenho que desenvolver uma parte no meu sistema que, assim que a pessoa for digitando o valor o sistema vai efetuando a soma.

 

Efetuando a soma e colocando o valor da soma no input type=text id=total

 

O meu formulário esta com o seguinte código. O sistema também tem que fazer o desconto, o campo de desconto é em porcentagem.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Soma de Valores</title>
</head>

<body>
<style type="text/css">
#valor{
	margin-top:3px;
}
</style>
<form name="form1" id="form1" action="#">
Valor 1: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 2: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 3: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 4: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 5: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 6: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 7: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 8: R$<input type="text" name="valor" id="valor" value=""><br/>
Valor 9: R$<input type="text" name="valor" id="valor" value=""><br/><br/>

Taxa Coleta: R$<input type="text" name="taxacolet" id="taxacolet" value="">&nbsp;&nbsp;Embalagem: R$<input type="text" name="embalagem" id="embalagem" value="">&nbsp;&nbsp;Taxa Adicional: R$<input type="text" name="taxaadici" id="taxaadici" value="">&nbsp;&nbsp;Desconto: R$<input type="text" name="desconto" id="desconto" value=""><br/><br/>

Total: R$<input type="text" name="total" id="total" value=""><br/><br/>

<input type="submit" name="salvar" id="salvar" value="SALVAR">
</form>


</body>
</html>

 

Se alguém puder me ajudar ficarei muito agradecido.

 

Att;

Gilberto Jr

Compartilhar este post


Link para o post
Compartilhar em outros sites

<html>

	<head>
		<title>Soma</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
		$(function(){
			$('input').on("input", function(){
				$soma = parseInt($('#valor1').val()) + parseInt($('#valor2').val()) + parseInt($('#valor3').val()) + parseInt($('#valor4').val()) + parseInt($('#valor5').val()) + parseInt($('#valor6').val()) + parseInt($('#valor7').val()) + parseInt($('#valor8').val()) + parseInt($('#valor9').val()) + parseInt($('#taxacolet').val()) + parseInt($('#embalagem').val()) + parseInt($('#taxaadici').val()) + parseInt($('#desconto').val());
				$('#total').val($soma);
			});
		});
		</script>
		<link rel="stylesheet" href="css/style.css">
	</head>
<style type="text/css">
#valor{
	margin-top:3px;
}
</style>
<form name="form1" id="form1" action="#">
Valor 1: R$<input type="text" name="valor" id="valor1" value="0"><br/>
Valor 2: R$<input type="text" name="valor" id="valor2" value="0"><br/>
Valor 3: R$<input type="text" name="valor" id="valor3" value="0"><br/>
Valor 4: R$<input type="text" name="valor" id="valor4" value="0"><br/>
Valor 5: R$<input type="text" name="valor" id="valor5" value="0"><br/>
Valor 6: R$<input type="text" name="valor" id="valor6" value="0"><br/>
Valor 7: R$<input type="text" name="valor" id="valor7" value="0"><br/>
Valor 8: R$<input type="text" name="valor" id="valor8" value="0"><br/>
Valor 9: R$<input type="text" name="valor" id="valor9" value="0"><br/><br/>

Taxa Coleta: R$<input type="text" name="taxacolet" id="taxacolet" value="0">&nbsp;&nbsp;Embalagem: R$<input type="text" name="embalagem" id="embalagem" value="0">&nbsp;&nbsp;Taxa Adicional: R$<input type="text" name="taxaadici" id="taxaadici" value="0">&nbsp;&nbsp;Desconto: R$<input type="text" name="desconto" id="desconto" value="0"><br/><br/>

Total: R$<input type="text" name="total" id="total" value=""><br/><br/>

<input type="submit" name="salvar" id="salvar" value="SALVAR">
</form>


</body>
</html>

Segue o código com a resolução do problema.

 

Dá um toque se é isso que queria mesmo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@juliosena, é isso mesmo. Estamos caminhando. Eu fiz algumas mudanças e esta fazendo da forma que eu quero.

 

O sistema tem duas situações. Vou falar uma de cada vez. No sistema tem dois campos no caso input. O campo peso em gramas, quando eu digito um valor tipo 100 e o foco sai do campo peso, o sistema vai até o banco de dados com aquele peso e faz a busca do valor e coloca o valor no campo id=valor. Segue o codigo abaixo com as mudanças que eu fiz.

 

<!doctype html>
<html>

	<head>
		<title>Soma</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
		$(function(){
			$('input').on("input", function(){
				$somapeso = (parseFloat($('#valor1').val()) + parseFloat($('#valor2').val()) + parseFloat($('#valor3').val()) + parseFloat($('#valor4').val()) + parseFloat($('#valor5').val()) + parseFloat($('#valor6').val()) + parseFloat($('#valor7').val()) + parseFloat($('#valor8').val()) + parseFloat($('#valor9').val()))
				
				$taxas =  (parseFloat($('#taxacolet').val()) + parseFloat($('#embalagem').val()) + parseFloat($('#taxaadici').val()))
				
				
				$desconto = parseFloat($('#desconto').val());
				
				$prctg = parseFloat($desconto)/100;
				
				$DesconEmReal = $somapeso*$prctg;
				
				//alert($DesconEmReal);
				
				$valorComDesc = $somapeso-$DesconEmReal;
				
				$soma = $valorComDesc+$taxas;
				
				$('#total').val($soma.toFixed(2));
			});
		});
		</script>
<script>
	function moeda(z){  
		v = z.value;
		v=v.replace(/\D/g,"")  //permite digitar apenas números
	v=v.replace(/[0-9]{12}/,"inválido")   //limita pra máximo 999.999.999,99
	//v=v.replace(/(\d{1})(\d{8})$/,"$1.$2")  //coloca ponto antes dos últimos 8 digitos
	//v=v.replace(/(\d{1})(\d{5})$/,"$1.$2")  //coloca ponto antes dos últimos 5 digitos
	v=v.replace(/(\d{1})(\d{1,2})$/,"$1.$2")	//coloca virgula antes dos últimos 2 digitos
		z.value = v;
	}
</script>

<script>
$(document).ready(function () {
    $("input[type='text']").focus(function () {
        this.select();
    });
})
</script>
        
		<link rel="stylesheet" href="css/style.css">
	</head>
<style type="text/css">
#valor{
	margin-top:3px;
}
</style>
<form name="form1" id="form1" action="#">
Peso em Grama: <input type="text" name="pesogram" id="pesogram1" value="0">&nbsp;&nbsp;Valor 1: R$<input type="text" name="valor" id="valor1" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram2" value="0">&nbsp;&nbsp;Valor 2: R$<input type="text" name="valor" id="valor2" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram3" value="0">&nbsp;&nbsp;Valor 3: R$<input type="text" name="valor" id="valor3" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram4" value="0">&nbsp;&nbsp;Valor 4: R$<input type="text" name="valor" id="valor4" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram5" value="0">&nbsp;&nbsp;Valor 5: R$<input type="text" name="valor" id="valor5" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram6" value="0">&nbsp;&nbsp;Valor 6: R$<input type="text" name="valor" id="valor6" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram7" value="0">&nbsp;&nbsp;Valor 7: R$<input type="text" name="valor" id="valor7" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram8" value="0">&nbsp;&nbsp;Valor 8: R$<input type="text" name="valor" id="valor8" onkeyup="moeda(this);" value="0.00"><br/>
Peso em Grama: <input type="text" name="pesogram" id="pesogram9" value="0">&nbsp;&nbsp;Valor 9: R$<input type="text" name="valor" id="valor9" onkeyup="moeda(this);" value="0.00"><br/><br/>

Taxa Coleta: R$&nbsp;<input type="text" name="taxacolet" id="taxacolet" onkeyup="moeda(this);" value="5.25"><br/>
Embalagem: R$&nbsp;<input type="text" name="embalagem" id="embalagem" onkeyup="moeda(this);" value="11.25"><br/>
Taxa Adicional: R$&nbsp;<input type="text" name="taxaadici" id="taxaadici" onkeyup="moeda(this);" value="11.33"><br/>
Desconto: R$&nbsp;<input type="text" name="desconto" id="desconto" value="5.00"><br/><br/>

Total: R$&nbsp;<input type="text" name="total" id="total" value=""><br/><br/>

<input type="submit" name="salvar" id="salvar" value="SALVAR">
</form>


</body>
</html>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, os campos são dinâmicos, as vezes pode ter 1, ou 2 ou mais...

 

E tipo, o campo peso1 quando eu preencher o campo, e mudar o foco ele vai buscar o um valor no banco de dados e vai preencher o campo valor1. E a soma só deve ser feito com os valores do campo valor1, valor2, valor3 etc..

 

Att;

Gilberto Jr

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 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>  
    • 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);
      ?>
       
       
       
       
       
×

Informação importante

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