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 maurouni
      Tenho uma tabela com preços de fornecedores e preciso de um select que me retorne apenas o melhor preço do fornecedor conforme ilustra a imagem em anexo.

    • By Boca
      Pessoal preciso fazer uma consulta simples mas não estou obtendo resultado, tenho a seguinte tabela
      --------------- | ID | TID | --------------- | 56 | 2 | --------------- | 58 | 2 | --------------- | 25 | 8 | --------------- | 25 | 2 | --------------- | 12 | 9 | --------------- | 18 | 2 | --------------- | 45 | 10 | --------------- | 35 | 2 | --------------- | 18 | 8 | ---------------
      Minha consulta
      SELECT ID FROM table WHERE TID = 2 and TID = 8 GROUP BY ID

      resultado esperado
      25 e 18
       
    • By Samuel Pietro
      Tenho um select em PDO e preciso que a consulta retornada vire uma variavel, mas a variavel só pega a ultima linha da tabela e eu preciso que pegue todas as linhas que existirem.
       
      $conexao = conexao::getInstance(); $sql = 'SELECT * FROM RegistroE'; $stm = $conexao->prepare($sql); $stm->execute(); $Sql = $stm->fetchAll(PDO::FETCH_OBJ); foreach ($Sql as $SqlReg): $conteudo_meio = picture_X($SqlReg->E_01,1) .picture_X($SqlReg->E_02,25) .picture_9($SqlReg->E_03,4) .picture_X($SqlReg->E_04,14) .picture_9($SqlReg->E_05,8) .picture_9($SqlReg->E_06,8) .picture_9($SqlReg->E_07,8) .picture_9($SqlReg->E_08,8) .picture_9($SqlReg->E_09,8) .complementoRegistro(96,"brancos") .picture_9($SqlReg->E_11,1) .complementoRegistro(1,"brancos") ; endforeach; Como eu poderia está fazendo isto?
    • By Anderson Campos da Silva
      Olá,
       
      Estou com um problema, que para alguns pode ser simples, é o seguinte:
       
      Tenho 2 tabela relacionadas, MODELO e EQUIPAMENTO
       
      TABELA MODELO
      idModelo (INT) - chave primária  
      txModelo (VARCHAR)
       
      TABELA EQUIPAMENTO 
      idEquipamento (INT) - chave primária   
      patrimonio (VARCHAR)
      situacao (VARCHAR)
      idModelo (INT) - Chave estrangeira
       
      O campo situação pode ser preenchido apenas apenas com PRODUÇÃO OU ESTOQUE.
       
      Enfim, preciso de um SELECT que retorne as seguintes colunas txModelo, quantidade de equipamentos por modelo, quantidade de equipamentos com PRODUÇÃO, e quantidade de equipamentos com ESTOQUE, exemplo:
       
      txModelo | total | produção | estoque
      CISCO           7            4                  3
      HP                15          10                 5
      DELL            10           2                   8
       
      Desde já agradeço
    • By Bobrinha
      Olá, estou com um probleminha e não estou achando uma solução amigável e agradeço desde de já qualquer ajuda.
       
      Bom ao usar o php com o file_get_contents e buscar a URL https://www.udemy.com/api-2.0/courses/2064455?fields[course]=title,headline,price ela me retorna o price ou seja o preço em dolar, no entanto se eu jogar essa URL no navegador diretamente ela retorna o valor em real.
       
      O mesmo acontece se eu jogar no jquery com ajax e puxar a url no meu pc e no servidor web o preço fica em dolar mais se jogar diretamente no navegador fica em real o valor 
       
      Alguém saberia por que? 
×

Important Information

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