Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
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?
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>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>Tente trocar a linha que abre o .change por essa:
jQuery('#produto').on('change', function() {
>
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! =/
Você está duplicando ID's, isso não pode. Use class.
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>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.
Muito obrigado Allex. Preciso estudar JS! =)
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 += ' <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 +=' <button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span> 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> 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>>
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 += ' <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 +=' <button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span> 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> 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 ?
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.