Ir para conteúdo
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

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 MateusDuarte
      Podem me ajudar? Sou novato em PHP e estou precisando de uma ajudinha.
      Tenho 2 tabelas no banco: filmes e generos.
      Faço o cadastro individual de todos os generos na tabela generos, e no cadastro de filmes eu puxo todos os generos por um multiple select. Até ai tudo certo, ele salva no banco de dados assim:
      genero1, genero2, genero3.
       
      Porém na hora de mostrar eu não sei separar eles das virgulas.
      Segue meu SELECT simples:
      <main class="content"> <?php $sql = "SELECT * FROM genero ORDER BY RAND()"; $result = $connect->query($sql); if($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $teste = $row["id_genero"]; ?> <section class="panel"> <h2><a id="links-generos" href="generos-filmes.php?id=<?php echo $row['id_genero'];?>"><?php echo $row["descricao"];?></a></h2> <div class="recentslider"> <div class="swiper-container"> <div class="swiper-wrapper"> <?php $sql_t = "SELECT * FROM filmes WHERE id_genero = ".$teste." ORDER BY RAND()"; $result_t = $connect->query($sql_t); if($result_t->num_rows > 0) { while($row_t = $result_t->fetch_assoc()) { ?> <div class="swiper-slide"><?php echo "<a href='single-filmes.php?id=".$row_t['id_filme']."&genero=".$row_t['id_genero']."';>";?><img src="capa/<?php echo $row_t["capa_filme"];?>"><h3 class="hometitle"><?php echo $row_t["titulo_filme"];?></h3></a></div> <?php }} else { echo "0 results"; } ?> </div> <div class="nextdirection recent-next"><img src="img/right-arrow.svg"> </div> <div class="leftdirection recent-prev"><img src="img/left-arrow.svg"> </div> </div> </div> </section> <?php }} else { echo "0 results"; } ?> </main> (Desculpa se não ficou alinhado, só copiei e colei.)

      Reparem que primeiro dou um select na tabela genero, e salvo o ID dela em uma variavel, e depois vou um select na tabela filmes usando a variavel que salvei antes como uma condição.
      Porem na tabela filmes, os generos estão salvos separados por virgula. Como consigo fazer um select separando ela das virgulas?
       
    • Por Highlander1901
      Senhores, buenas... não consigo efetuar esse SELECT, e já quebrei a cabeça pra dar certo. Podem me ajudar?
       
      SELECT
               "A"."CCUSTO" as "Célula",
               "A"."IDCONTR" as "Matrícula",
               "A"."NOME",
               "A"."SINDICATO",
               "A"."DESCEVENTO",
               "A"."LOCAL",
               (HOUR("A"."JAN") + (MINUTE("A"."JAN") / 60)) as "Mes Anterior",
               (HOUR("A"."FEV") + (MINUTE("A"."FEV") / 60)) as "Mes Atual",
               ((HOUR("A"."JAN") + (MINUTE("A"."JAN") / 60)) -(HOUR("A"."FEV") + (MINUTE("A"."FEV") / 60))) as "Crescimento",
               (MINUTE("A"."FEV") / 60) as "Minutos"
      FROM  "BD_HORAS" AS  "A" 
      WHERE     "A"."CCUSTO"  = '113'
       OR    "A"."CCUSTO"  = '432'
       
      Detalhes de erro:
      Qualquer uma das opções abaixo poderia ser a possibilidade para o erro:

      1. Poderia haver tipos incompatíveis de dados em um dos lados do operador comparador. Nesse caso, converta as colunas e tente novamente.

      2. Não há função correspondente ao nome  e argumento fornecidos. Você pode precisar adicionar conversões do tipo explícita.   Obs.: Sempre utilizei esse código, o que alterava era apenas o as colunas "JAN" e "FEV", dependendo do avanço dos meses.
       
      HEEEELP!
    • Por marcosberaldo
      Pessoal, boa noite.
      Tenho uma tabela no BD que preciso criar um rankin.
      Fiz uma select que soma duas colunas, de pontuação e outra de desempate, depois ordena as somas por jogador e cria o ranking.
      Até ai está funcionando blz.
      Meu problema é o seguinte: Imagine que existam 100 jogadores, eu estou em 70º. Eu quero mostrar o rankin com a minha colocação, mas é inviável criar uma lista com mais de 70 jogadores. O que eu quero é mostrar 10 colocações antes de mim e 10 depois de mim, ou seja, mostrar do 60º ao 80º colocado, mas não consigo fazer isso.
      No meu código criei até um while que identifica minha colocação (70º), mas não consegui criar um while que exiba somente esses 20 jogadores. Se alguém souber como resolver... fico muito grato. Segue o código:
      $sql = "SELECT *, SUM(Pontos) as TotalPontos, sum(Acerto_Exato) as Acertos FROM placares INNER JOIN jogadores ON placares.JogadorID = jogadores.id WHERE rodada = '$rodada' GROUP BY JogadorID ORDER BY TotalPontos DESC, Acerto_Exato DESC"; // Inicia o While de pontuação $result = mysqli_query($conn, $sql); $result2 = mysqli_query($conn, $sql); $i = 1; // Define 1 para o primeiro lugar no ranking         // Esse while identifica minha posição no ranking         while($r = mysqli_fetch_assoc($result2)) {         $ID_Jog        =    $r['JogadorID'];         $Pos        =    $totalArray[$r['JogadorID']] = $i++;         if($LoginID == $ID_Jog) {          $Minha_Colocacao = $Pos;              }          }                   while($row = mysqli_fetch_assoc($result)) { $ID_Jogador        =    $row['JogadorID']; $Posicao        =    $totalArray[$row['JogadorID']] = $i++."º "; $RankJogador    =    $row['nome']; $Pontos            =    $row['TotalPontos']; $AcertoExato    =    $row['Acertos']; // Verifica se o usuário é o jogador logado e marca um style diferente para ele. if($LoginID == $ID_Jogador) {     // Se for o mesmo jogador define um fundo colorido para a linha dele na tabela     $destaque = "style=\"background-color:#e6a527\"";     //$Pos = explode('º',$Posicao);         } else {     // Caso não seja zera a variável novamente.     unset($destaque); } echo " <div class=\"divTableRow\" $destaque> <div class=\"divTableCell\" align=\"center\">$Posicao</div> <div class=\"divTableCell\" >$RankJogador</div> <div class=\"divTableCell\" align=\"center\">$Pontos</div> <div class=\"divTableCell\" align=\"center\">$AcertoExato</div> </div>"; }  
       
    • Por bessa238
      Bom dia galera, estou com um problema do qual não consigo resolver. É o seguinte, eu tenho 2 selects, um com as siglas dos estados brasileiros e outro com as cidades, o select de cidades é populado de acordo com o estado selecionado, até aí tudo bem. O problema é que estou usando um webservice do viacep para trazer dados de acordo com o cep preenchido, ao preencher o cep ele seta todos os dados corretamente, mas quando chega o valor da cidade, ele tenta setar o select antes do preenchimento das cidades. Sendo assim gostaria de saber se existe uma maneira de saber quando o select esta completamente carregado ? Segue o trecho do código…
      //Consulta o webservice viacep.com.br/ $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { //Atualiza os campos com os valores da consulta. $("#endereco").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#estadoatual").val($('option:contains('+(dados.uf)+')').val()); $("#estadoatual").change(); $("#cidadeatual").val($('option:contains('+(dados.localidade).toUpperCase()+')').val()); $("#complemento").val(dados.complemento); } //end if. else { //CEP pesquisado não foi encontrado. limpa_formulário_cep(); alert("CEP não encontrado."); } });
    • Por eduardohaag
      Boa noite pessoal,
      Esbarrei em um novo problema com consultas no meu sistema.
       
      Tenho um formulário no sistema que deverá apresentar todos os materiais utilizados em uma determinada Venda e seus respectivos estoques obtidos através da soma das entradas e saidas do estoque.
      Para isso devo buscar os dados em 3 tabelas do banco de dados sendo elas VendasProdutos, Composicao,  Materiais e Estoque

       
      Eis que surge meu problema, como posso ter vários produtos na venda e alguns produtos usam os mesmos materiais, a consulta está retornando com os materiais duplicados, quando o que eu gostaria era que somasse de acordo com cada material.
       
      A query que estou usando para teste no acesso é a seguinte:
      SELECT Composicao.IdMaterial, materiais.descricao, Sum(Estoque.Quantidade) AS Estoque, [VendasProdutos]![Quantidade]*[Composicao]![Quantidade] AS TotalUtilizado FROM (VendasProdutos LEFT JOIN (materiais RIGHT JOIN Composicao ON materiais.ID = Composicao.IdMaterial) ON VendasProdutos.IdProduto = Composicao.IdProduto) LEFT JOIN Estoque ON materiais.ID = Estoque.IdMaterial GROUP BY Composicao.IdMaterial, materiais.descricao, [VendasProdutos]![Quantidade]*[Composicao]![Quantidade], VendasProdutos.IdVenda HAVING (((VendasProdutos.IdVenda)=1));  
      A consulta está retornando os dados dessa forma:

       
      E eu gostaria de que agrupasse por ex:
       
      ID                Descricao                Estoque               TotalUtilizado
      1                 Capa Agenda             34                             10
      2                 Miolo Agenda            27                              5
       
      Alguem Sabe como posso fazer isso?
      Desulpem pelo post gigante, mas não sabia como explicar melhor.
×

Informação importante

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