Somar valores vindo do select/option
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);
?><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 += ' <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> <button type="button" class="btn btn-danger btn-sm del" id="add"><span class="glyphicon glyphicon-minus"></span> 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> 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>Discussão (6)
Carregando comentários...