Jump to content
Eliabe Andrade

Somar valores vindo do select/option

Recommended Posts

Boa noite pessoal, estou iniciando em programação web, e já estou desenvolvendo um projeto pequeno para a empresa que trabalho e a minha dificuldade é a seguinte, possuo um campo SELECT/OPTION, onde o usuário seleciona o produto e  caso ele queira adicionar mais produtos é só clicar no botão adicionar, até tudo ok, a minha dificuldade esta em fazer com que os valores dos produtos se somem em um INPUT, até consegui exibir o valor mas quando adiciono mais um campo e seleciono o produto, ao invés dele somar ele substitui o valor do produto anterior, segue abaixo meu teste que até agora por zilhões de tentativas não obtive exito e agora peço ajuda aos senhores que tem mais experiência.

 

<?php
include_once("../conexao/conexao.php");

$conexao = conexao::getInstance();
$sql = "SELECT * FROM produtos";
$stm = $conexao->prepare($sql);
$stm->execute();
$produtos = $stm->fetchAll(PDO::FETCH_OBJ);

?>
<!doctype html>
<html lang="pt-br"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cadastro de Cliente</title>
<link rel="stylesheet" type="text/css" href="../administrativo/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../administrativo/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../administrativo/js/jquery.mask.js"></script>

<style type="text/css">
	body { margin: 0; padding: 0;}
	.box { margin: 0 auto; width: 800px;}
	#fieldsHidden{ display:none;}
	#alvo{padding:10px 5px;}
	.margens{
			margin-left: 2px;
			margin-right: 2px;
		}
	#p{
			margin-left: 2px;
			margin-right: 2px;
		}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$('body').on('change','.prod_tipo' , function() {
			var id = $(this).data('id');
			$('#' + id).val($(this).find(':selected').data('valor'));
		});
		
		$('body').on('change','.prod_tipo' , function() {
						
			function convertMoeda(n, c, d, t)
			{
				c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
				return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
			}
			
			var id = $(this).data('id');
			
			var soma = 0;
			
			$(this).find(':selected').each(function(id, element){
				
			soma = soma + parseFloat($(element).data('somar_valor' + id))
				
			})
			
			 $('#valor_total').val(convertMoeda(soma));
			
		});
		
		var contar = 1;
		
		$("#add").on('click', function(){
			
		var select = '<div class="form-group"><div class="form-inline row margens">';
			select += '<div class="form-group col">';
		 	select += '<label for="vnd_tipo_vendedor" class="label label-small" style="color: black;">TIPO PRODUTO:</label><br><select data-id="' + contar + '" data-conta_campos="' + contar + '" class="form-control custom-select prod_tipo" name="prod_tipo[]" id="prod_tipo" data-error="Por favor, selecione um produto." required><option value="" >PRODUTO: </option><?php foreach($produtos as $produto): ?><option value="<?= $produto->produto ?>" name="id" data-valor="<?= number_format($produto->valor, 2, ',','.') ?>" data-somar_valor0="<?= $produto->valor ?>" ><?= $produto->produto ?></option><?php endforeach;?></select>';
			select += '<div class="help-block with-errors"></div></div>';
			select += '&nbsp;<div class="form-group col">';
			select +='<label for="vnd_tipo_vendedor" class="label label-small" style="color: black;">VALOR:</label><br><div class="input-group"><span class="input-group-addon">R$</span><input id="' + contar + '" class="form-control dinheiro" id="prod_valor" name="prod_valor[]" type="text" value="" size="6" required></div>';
			select +='<div class="help-block with-errors"></div></div>';
			select +='</div>&nbsp;<button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span>&nbsp;Remover</button></div>';
			
			contar++;
			
		$("#produtos").append(select);
			return false;
		});
		
		$(document).on('click', '.del', function(){
			$(this).parent().remove();
		});
	});
	

	
</script>
<script type="text/javascript">
	$(document).ready(function(){
	//$('#cod_cli').mask('999999999');
	//$('#rg').mask('99.999.999', {reverse: true});
	//$('.cpf').mask('000.000.000-00', {reverse: true});
	//$('#cep').mask('99.999-999');
	//$('#telefone').mask('(99) 9999-9999');
	//$('#celular').mask('(99) 99999-9999');
	//$('#exame').mask('000.000.000.000.000,00', {
	//	reverse: true
	//});
	//$('#armacao').mask('000.000.000.000.000,00', {
	//	reverse: true
	//});
	//$('#prod_valor').mask('000.000.000.000.000,00', {
	//	reverse: true
	//});
	$('.dinheiro').mask('000.000.000.000.000,00', { 
		reverse : true
	});
	
	});
</script>	
</head>
<body>
	
<div class='container-fluid'>
	<button type="button" class="btn btn-primary btn-sm" id="add"><span class="glyphicon glyphicon-plus"></span>&nbsp;Adicionar Produto</button><br><br>

<form class="form form-inline" action="" method="post">	
<fieldset>
	
	<div class="form-group">						
		<div class="form-inline row margens">
		
	<div class="form-group col">
		<label for="prod_tipo" class="label label-small" style="color: black;">TIPO DE PRODUTO:</label><br>
			<select data-id="0" data-conta_campos="0" class="form-control custom-select prod_tipo" name="prod_tipo[]" id="prod_tipo" data-error="Por favor, selecione um produto." required >
				<option value="" >PRODUTO: </option>
				<?php foreach($produtos as $produto): ?>
				<option value="<?= $produto->produto ?>" name="id" data-valor="<?= number_format($produto->valor, 2, ',','.') ?>" data-somar_valor0="<?= $produto->valor ?>" ><?= $produto->produto ?></option>
				<?php endforeach;?>
			</select>
		 <div class="help-block with-errors"></div>
	</div>
	
	<div class="form-group col">
		<label for="prod_valor" class="label label-small" style="color: black;">VALOR:</label><br>
			<div class="input-group">
				<span class="input-group-addon">R$</span>
				<input class="form-control dinheiro" id="0" name="prod_valor[]" type="text" value="" size="6" required>				
			</div>
			<div class="help-block with-errors"></div>
	</div>
			
		</div>
	</div><br>

	<div class="form-group">						
		<div class="form-inline row margens" id="produtos">
			
		<!-- INPUT'S DINAMICOS -->
			
		</div>
	</div><br>

	<div class="form-group">						
		<div class="form-inline row margens">
			
			<div class="form-group col">
		<label for="prod_valor" class="label label-small" style="color: black;">VALOR TOTAL:</label><br>
			<div class="input-group">
				<span class="input-group-addon">R$</span>
				<input type="text" name="valor_total" id="valor_total" class='form-control dinheiro'/>
			</div>
			<div class="help-block with-errors"></div>
	</div>
			
		</div>
	</div>
	
</fieldset>
</form>
</div>
	
</body>
<script src="../administrativo/js/bootstrap.min.js"></script>
</html>

 

Share this post


Link to post
Share on other sites
2 horas atrás, angelorubin disse:

Eu reproduzi de forma simples, veja se seria algo assim - https://codepen.io/angelorubin/pen/jvdzvo?editors=0010

 

Boa Noite,

Angelo.

 

Seria + ou - assim, só que ao invés de digitar o valor do produto no campo input para somar, o valor vem do select/option que vai buscar no banco de dados. Reproduzi como eu estou tentando fazer, https://codepen.io/eliabeandrade/pen/YOBbdw, o meu problema é que consigo mostrar o valor no campo total mas não estou conseguindo somar esse valor, ao invés disso ele esta substituindo o valor e mostrando o valor do produto.

Share this post


Link to post
Share on other sites
3 horas atrás, angelorubin disse:

Eu ajustei, basta você trazer os dados e inserir no html, veja se é isso.

 

Exatamente isso Ângelo, muito obrigado, estou tentando adicionar um input que mostre ao lado do select/option o valor unitário do produto e um botão para remover o campo caso desista deste produto, como fiz AQUI, criei uma variável botaoRemove mas quando adiciono o campo ele adiciona apenas o botão e o campo input não consigo repassar o valor do produto.

Share this post


Link to post
Share on other sites
22 horas atrás, angelorubin disse:

Precisa melhorar MUITAS coisas, mas acho q basicamente seria isso.

 

isso, é exatamente isso, porque quando for fazer o update preciso repassar o valor de cada produto selecionado, copiei o seu codepen para o meu mas não consegui com que mostre no input

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Thiago Btos
      Boa tarde galera.
       
      Fiz um select que tras 4 informações do banco (matricula, nome, data e hora)
      SELECT QD1_MAT, RA_NOME, QD1_DTBAIX AS DATA, QD1_HRBAIX FROM QD1010 QD1 INNER JOIN SRA010 SRA ON RA_MAT = SUBSTR(QD1_MAT, 5) AND SRA.D_E_L_E_T_ <> '*' ORDER BY QD1_DTBAIX, QD1_HRBAIX Retornando os seguintes registros:

       
       
       
      Preciso retornar somente as linhas em amarelo, que seria a seguinte condição.
      Caso tiver alguma matricula igual, trazer somente o registro com a maior data, junto com seu respectivo horário.
       
       
      O mais próximo que consegui chegar foi utilizando o MAX para data e hora, e agrupando o restante dos campos.
      SELECT QD1_MAT,RA_NOME,MAX(DATA), MAX(QD1_HRBAIX) FROM ( SELECT QD1_MAT, RA_NOME, QD1_DTBAIX AS DATA, QD1_HRBAIX FROM QD1010 QD1 INNER JOIN SRA010 SRA ON RA_MAT = SUBSTR(QD1_MAT, 5) AND SRA.D_E_L_E_T_ <> '*' ) GROUP BY QD1_MAT,RA_NOME Porém na hora ele não pega o valor correspondente e sim o valor máximo.

       
       
      Ai estou travado nessa parte, como faço para trazer a hora corresponde sem o restante dos registros?
    • By Diego-SLP
      Bom dia,
       
      Estou fazendo uma tela de relatorios de registro de ponto e não estou conseguindo totalizar as horas conforme trago do banco de dados, se alguem puder me ajudar.
       
      SELECT p.cod_obra,f.nome,o.obra, TIME_FORMAT(SEC_TO_TIME(SUM(TIME_TO_SEC(p.totalhora))),'%H:%i') AS hora, TIME_FORMAT(SEC_TO_TIME(SUM(TIME_TO_SEC(p.totalhoraextra))),'%H:%i') AS horaextra, f.funcao FROM rh_pontoFuncionario p, rh_funcionario f, rh_obra o WHERE p.data BETWEEN '2020/10/01' AND '2020/11/20' AND p.cod_obra = '20056' AND p.cod_func = f.cod AND p.cod_obra = o.cod GROUP BY p.cod_obra, f.nome Essa query me traz COD_OBRA,NOME,OBRA,HORA,HORAEXTRA,FUNCAO e eu gostaria de TOTALIZAR o campo HORA e HORAEXTRA somando todas as linhas mas não consigo
    • By MarcosAntonio
      boa tarde. 
      Estou precisando de um Select que retorne uma soma que ao chegar a determinado valor ela reinicie e continue fazendo sucessivamente
       select   pedido,   volume,   limite,   SUM(volume) over (order by pedido ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) saldo   from pedidos  group by pedido o select está retornando assim porém quero que toda vez que chegue ou passe do limite resete o saldo, por exemplo parar no 100 que é o limite e começar um novo saldo
      pedido     volume    limite    saldo  1             70            100        70  2             10            100        80  3             20            100        100  4             50            100        150  5             30            100        180  
      preciso que ele soma o volume enquanto o saldo seja <= que o "limite", quando passar pare de somar e comece outra soma começando do 0, como no exemplo abaixo.
      pedido    volume    limite    saldo  1             70            100        70  2             10            100        80  3             20            100        100  4             50            100        50  5             30            100        80  
    • By lezão
      Boa tarde, meus amigos!
      Td bem com vcs?
       
      Tenho um Select em ASP que tbm trabalho que roda normal.
      "SELECT * FROM Banners order by RND(INT(NOW*id_banners)-NOW*id_banners)"  
      E gostaria que roda se em PHP tbm mas infelizmente não estou conseguindo realizar esse acontecimento.
      "SELECT * FROM Produtos where Banners = 'Sim' order by RND(INT(NOW*Banners)-NOW*Banners)"  
      Desde ja muito obrigado!
       
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Venho recorrer a vós pois já não consigo mais.... 
       
      Tenho um campo select com algumas opções de nome.
      <select class="seleciona_nome"> <option value="Joao">Joao</option> <option value="Julio">Julio</option> <option value="Pedro">Pedro</option> </select>  
      E um campo input do tipo "text"
      <input type="text" class="opcaoSelect" autocomplete="off" disabled="disabled">  
      Preciso que ao selecionar uma opção do "Select" seja auto preenchido no input. Tenho um codigo que funcionava e não sei mais porque não funciona, veja abaixo;
       
      <script> $(document).ready(function(){ $('.seleciona_nome').on('change', addOption); }); function addOption(){ $('.opcaoSelect').val(this.value); } </script>  
      Peço ajuda ai caso alguém consiga me ajudar a entender porque este não funciona mais.
       
      Obrigado.
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.