Somar valores vindo do select/option

Eliabe Andrade · Setembro 19, 2018

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>

angelorubin · Setembro 20, 2018

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

Eliabe Andrade · Setembro 20, 2018

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.

angelorubin · Setembro 21, 2018

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

Eliabe Andrade · Setembro 21, 2018

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.

angelorubin · Setembro 21, 2018

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

Eliabe Andrade · Setembro 22, 2018

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

Entrar

Arquivado

Somar valores vindo do select/option

Recommended Posts

Eliabe Andrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliabe Andrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliabe Andrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliabe Andrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante