input receber valor do produto no select!

Hewitt · Agosto 29, 2016

Galera, bom dia. Estou simplificando o sisteminha que fiz. Não sei se é porque hoje é segunda-feira e meu cérebro está um pouco lento, ou se me deu um branco mesmo.

Pois bem, tenho os produtos e o valor de cada produto cadastrado no banco de dados. Os produtos consigo normalmente, mas o preço (input hidden), só pega o último cadastrado.

<form name="calculo" action="" method="post" class="form-inline">
    
<div id="calculo" class="form-group">
<label>Produtos</label>
   <select name="produto[]" class="form-control">

   <?
include 'init.php';

		$sql = mysql_query("SELECT * FROM produtos ORDER BY nome");
			while ($res = mysql_fetch_array($sql)){
				
				$preco = $res['preco'];
				
				echo '<option value="'.$res['nome'].'">'.$res['nome'].'</option>';
			}
		?>		
			
            </select>
            <label>Quantidade</label>
			<input type="text" class="form-control" placeholder="quantidade" name="qnt[]" value="" />
            <!--<label>Preço Unitário</label>-->
			<input type="hidden" class="form-control" placeholder="preço" name="preco[]" value="<? echo $preco ?>" />
            
            <br><br>
            </div>
            <div class="container">
            <input class="btn btn-success" type="submit" value="Calcular" name="calcular" />
        </form>
     </div>
        <br><br>
    
    <?php 
		       if( isset ( $_POST[ 'calcular' ] ) ) {
		              for( $i = 0 , $x = count( $_POST['produto'] ) ; $i < $x ; ++ $i ) {
						  	  echo '<div align="left">';
		                      echo '<b>Produto: </b>'.$_POST['produto'][ $i ].'<br />';
							  echo '<b>Quantidade: </b>'.$_POST['qnt'][ $i ].'<br />'; 
		                      echo '<b>Preço: </b> R$ '.$_POST['preco'][ $i ].'<br />';
							  echo '<b>Total de '.$_POST['produto'][ $i ].' :</b> R$ '.(($_POST['preco'][ $i ]) * ($_POST['qnt'][ $i ])).'<br /><br />';
							  echo '</div>';
							  $total += (($_POST['preco'][ $i ]) * ($_POST['qnt'][ $i ]));

		              }
							  echo '<div class="alert alert-success"><b>Total do Orçamento: R$ '.$total.'</b></div>'; 
		       }
		?>

Alguém poderia me dar uma luz?

Obrigado!

allex_carvalho · Agosto 29, 2016

Para usar a $preco fora do while, será preciso criar um escopo dela. Será preciso reavaliar a estrutura. Da forma que você fez, terá que popular o value do input hidden com ajax. Toda vez que selecionar um item no select, altera o valor do input.

Hewitt · Agosto 29, 2016

Para usar a $preco fora do while, será preciso criar um escopo dela. Será preciso reavaliar a estrutura. Da forma que você fez, terá que popular o value do input hidden com ajax. Toda vez que selecionar um item no select, altera o valor do input.

Tem algum exemplo dessa "população" via ajax?

allex_carvalho · Agosto 29, 2016

Veja se desta forma te ajuda a adaptar para sua necessidade:

<!DOYCTYPE html>
<html>
	<head>
		<title>Popular input atraves de item selecionado no select</title>
		
		<meta charset="utf-8" />
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
		
		<script type="text/javascript">
			jQuery(document).ready(function () {
				jQuery('#produto').change(function() {
					jQuery('#valor').val((jQuery(this).find(':selected').data('valor')));
				});
			});
		</script>
	</head>
	
	<body>
		<select id="produto" name="produto">
			<option data-valor="12,00" value="Nome Produto 1">Nome Produto 1</option>
			<option data-valor="30,00" value="Nome Produto 2">Nome Produto 2</option>
			<option data-valor="46,60" value="Nome Produto 3">Nome Produto3</option>
		</select>
		
		<input type="text" id="valor" name="valor" value="" />
	</body>
</html>

Hewitt · Agosto 29, 2016

Allex, funcionou perfeitamente, mas ainda não consegui passar os dados quando eu crio o input dinamicamente:

<script type="text/javascript">
   $(document).ready(function(){
         $("#add").click(function(){

			$("#calculo").append('<label>Produtos</label><select id="produto" name="produto[]" class="form-control"><option data-valor="0" value="0">[Selecione um produto]</option><? $sql2 = mysql_query("SELECT * FROM produtos ORDER BY nome");while ($res2 = mysql_fetch_array($sql2)){echo '<option data-valor="'.$res2['preco'].'" value="'.$res2['nome'].'">'.$res2['nome'].'</option>'; }?>');			
			$("#calculo").append('<label>Quantidade</label><input type="text" class="form-control" placeholder="quantidade" name="qnt[]" value="" />');
			$("#calculo").append('<input id="valor" type="text" class="form-control" placeholder="preço" name="preco[]" value="" /><br><br>');
                 });
   });
</script>

allex_carvalho · Agosto 29, 2016

Tente trocar a linha que abre o .change por essa:

jQuery('#produto').on('change', function() {

Hewitt · Agosto 29, 2016

Tente trocar a linha que abre o .change por essa:
jQuery('#produto').on('change', function() {

Continua a mesma coisa, só não funciona nos inputs criados dinamicamente! =/

allex_carvalho · Agosto 29, 2016

Você está duplicando ID's, isso não pode. Use class.

Hewitt · Agosto 29, 2016

Você está duplicando ID's, isso não pode. Use class.

Fiz como você pediu, no mesmo exemplo que me enviou acima, e também não funcionou. Estou fazendo algo errado?

(Moderador, favor mover para JS, pois é praticamente tudo de lá!)

<!DOYCTYPE html>
<html>
	<head>
		<title>Popular input atraves de item selecionado no select</title>
		
		<meta charset="utf-8" />
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
		
		<script type="text/javascript">
			jQuery(document).ready(function () {
				jQuery('.teste').change(function() {
					jQuery('.valor').val((jQuery(this).find(':selected').data('valor')));
				});
			});
		</script>
	</head>
	
	<body>
    <button id="add">+</button>
		<select class="teste" name="produto">
			<option data-valor="0,00" value="0">[Selecione um produto]</option>
			<option data-valor="12,00" value="Nome Produto 1">Nome Produto 1</option>
			<option data-valor="30,00" value="Nome Produto 2">Nome Produto 2</option>
			<option data-valor="46,60" value="Nome Produto 3">Nome Produto3</option>
		</select>
		
		<input type="text" class="valor" name="valor" value="" />
	</body>
    
<script type="text/javascript">
   $(document).ready(function(){
         $("#add").click(function(){
			 $("body").append('<select class="teste" name="produto"><option data-valor="0,00" value="0">[Selecione um produto]</option><option data-valor="16,00" value="Nome Produto 8">Nome Produto 8</option></select><input type="text" class="valor" name="valor" value="" />');
		 });
   });
</script>


</html>

allex_carvalho · Agosto 29, 2016

Não alterei a sua estrutura, só incrementei ela:

<!DOCTYPE html>
<html>
	<head>
		<title>Popular input atraves de item selecionado no select</title>
		
		<meta charset="utf-8" />
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
		
		<script type="text/javascript">
			jQuery(document).ready(function () {
				jQuery('body').on('change','.teste' , function() {
					var id = jQuery(this).data('id');
					jQuery('#' + id).val(jQuery(this).find(':selected').data('valor'));
				});
				
				var contar = 1;
				jQuery('#add').on('click', function(){
					contar++;
					jQuery("body").append('<select data-id="' + contar + '" class="teste" name="produto"><option data-valor="0,00" value="0">[Selecione um produto]</option><option data-valor="16,00" value="Nome Produto 8">Nome Produto 8</option></select><input type="text" id="' + contar + '" class="valor" name="valor" value="" />');
				});
			});
		</script>
	</head>
	
	<body>
		<button id="add">+</button>
		<select data-id="0" class="teste" name="produto">
			<option data-valor="0,00" value="0">[Selecione um produto]</option>
			<option data-valor="12,00" value="Nome Produto 1">Nome Produto 1</option>
			<option data-valor="30,00" value="Nome Produto 2">Nome Produto 2</option>
			<option data-valor="46,60" value="Nome Produto 3">Nome Produto3</option>
		</select>
		
		<input type="text" id="0" class="valor" name="valor" value="" />
	</body>
</html>

Através deste exemplo, tente adaptar a suas necessidades.

Hewitt · Agosto 29, 2016

Muito obrigado Allex. Preciso estudar JS! =)

Eliabe Andrade · Setembro 14, 2018

Boa tarde pessoal, sou iniciante em programação, cheguei a este tópico depois de muito procura, e com a ajuda dos comentário consegui adaptar o código do assunto relacionado ao tópico ao meu, porem estou enfrentado a seguinte dificuldade, consigo adicionar os campos dinâmicos e quando altero o mesmo consigo recuperar o valor no inputs dinâmico de cada select, porem se eu alterar o select principal todos os input's do valor são alterados, logo abaixo posto o meu código e se alguém por gentileza poder me ajudar fico grato.

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

?>
<html>
<head>
<meta charset="utf-8">
<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>

<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">
	jQuery(document).ready(function(){
		jQuery('body').on('change','.prod_tipo' , function() {
			var id = jQuery(this).data('id');
					jQuery('#' + id).val(jQuery(this).find(':selected').data('valor'));
			});
		
		var contar = 1;
		$("#add").on('click', function(){
			contar++;
		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 + '" 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="<?= $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 prod_valor" id="prod_valor" name="prod_valor" type="text" value="" size="6" readonly  required></div>';
			select +='<div class="help-block with-errors"></div></div>';
			select +='&nbsp;<button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span>&nbsp;Remover</button></div></div>';
		
		$("#produtos").append(select);
			return false;
		});
		
		$(document).on('click', '.del', function(){
			$(this).parent().remove();
		});	
	});

	jQuery(document).ready(function () {
		jQuery('.prod_tipo').on('change', function() {
					jQuery('.prod_valor').val((jQuery(this).find(':selected').data('valor')));
				});
			});
</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" 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="<?= $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 prod_valor" id="0" name="prod_valor" type="text" value="" size="6" readonly  required>
			</div>
			<div class="help-block with-errors"></div>
	</div>

		</div>
	</div>

	<div class="form-group">						
		<div class="form-inline row margens" id="produtos">
			
		</div>
	</div>
</fieldset>
</div>

</body>
<script src="../administrativo/js/bootstrap.min.js"></script>
</html>

Eliabe Andrade · Setembro 14, 2018

1 hora atrás, Eliabe Andrade disse:

Boa tarde pessoal, sou iniciante em programação, cheguei a este tópico depois de muito procura, e com a ajuda dos comentário consegui adaptar o código do assunto relacionado ao tópico ao meu, porem estou enfrentado a seguinte dificuldade, consigo adicionar os campos dinâmicos e quando altero o mesmo consigo recuperar o valor no inputs dinâmico de cada select, porem se eu alterar o select principal todos os input's do valor são alterados, logo abaixo posto o meu código e se alguém por gentileza poder me ajudar fico grato.


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

?>
<html>
<head>
<meta charset="utf-8">
<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>

<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">
	jQuery(document).ready(function(){
		jQuery('body').on('change','.prod_tipo' , function() {
			var id = jQuery(this).data('id');
					jQuery('#' + id).val(jQuery(this).find(':selected').data('valor'));
			});
		
		var contar = 1;
		$("#add").on('click', function(){
			contar++;
		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 + '" 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="<?= $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 prod_valor" id="prod_valor" name="prod_valor" type="text" value="" size="6" readonly  required></div>';
			select +='<div class="help-block with-errors"></div></div>';
			select +='&nbsp;<button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span>&nbsp;Remover</button></div></div>';
		
		$("#produtos").append(select);
			return false;
		});
		
		$(document).on('click', '.del', function(){
			$(this).parent().remove();
		});	
	});

	jQuery(document).ready(function () {
		jQuery('.prod_tipo').on('change', function() {
					jQuery('.prod_valor').val((jQuery(this).find(':selected').data('valor')));
				});
			});
</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" 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="<?= $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 prod_valor" id="0" name="prod_valor" type="text" value="" size="6" readonly  required>
			</div>
			<div class="help-block with-errors"></div>
	</div>

		</div>
	</div>

	<div class="form-group">						
		<div class="form-inline row margens" id="produtos">
			
		</div>
	</div>
</fieldset>
</div>

</body>
<script src="../administrativo/js/bootstrap.min.js"></script>
</html>

Boa tarde imasters, consegui resolver, bastou apenas retirar a classe prod_valor do input que esta no javascript que resolveu, de qualquer forma vlw, aproveitando o topico, gostaria de somar os valores dos input mostrando um valor total de todos os produtos, alguem poderia me ajudar nisso ?

Arquivado

input receber valor do produto no select!

Recommended Posts

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

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

Eliabe Andrade 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante