Auto cálculo em Jquery não funciona
Bom dia pessoal.
Eu fui, fazendo, acertando, até conseguir finalizar um auto cálculo em Jquery, que ficou funcionando corretamente.
Fiz em um formulário de outra página.
Porém, fui usar o mesmo script em uma nova página, conferindo sempre nomes, classes e afins.
Mesmo batendo tudo, neste novo formulário, o auto cálculo não funciona.
Já revirei tudo, mas não consigo encontrar porque ele não funciona.
Pela primeira vez usei o JSFiddle (aqui), mas segue também escrito o que fiz até agora:
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script>
<form name="pedido" id="pedido" method="post" enctype="multipart/form-data" action="">
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="nome" class="form-control" id="nome" placeholder="Nome" tabindex="1"/>
</div>
<div class="form-group col-md-6">
<input type="text" name="sobrenome" class="form-control" id="sobrenome" placeholder="Sobrenome" tabindex="2"/>
</div>
<div class="form-group col-md-6">
<input type="text" name="telefone" class="form-control telefone" id="telefone" placeholder="Telefone/ Celular" maxlength="15" tabindex="3">
</div>
<div class="form-group col-md-6">
<input type="text" name="email" class="form-control" id="email" placeholder="E-mail" tabindex="4"/>
</div>
<div class="form-group col-md-6">
<div class="form_select_config">
<select name="estado" tabindex="5" style="background-color: #FFFFFF;">
<option value="">Selecione o estado</option>
<option value="01">Acre</option><option value="02">Alagoas</option><option value="04">Amapá</option><option value="03">Amazonas</option><option value="05">Bahia</option><option value="06">Ceará</option><option value="07">Distrito Federal</option><option value="08">Espírito Santo</option><option value="09">Goiás</option><option value="10">Maranhão</option><option value="13">Mato Grosso</option><option value="12">Mato Grosso do Sul</option><option value="11">Minas Gerais</option><option value="14">Pará</option><option value="15">Paraíba</option><option value="18">Paraná</option><option value="16">Pernambuco</option><option value="17">Piauí</option><option value="19">Rio de Janeiro</option><option value="20">Rio Grande do Norte</option><option value="23">Rio Grande do Sul</option><option value="21">Rondônia</option><option value="22">Roraima</option><option value="24">Santa Catarina</option><option value="26">São Paulo</option><option value="25">Sergipe</option><option value="27">Tocantins</option> </select>
</div>
</div>
<div class="form-group col-md-6">
<div class="form_select_config">
<select name="cidade" tabindex="6">
<option value="" selected="selected" disabled="disabled">Escolha um estado primeiro</option>
</select>
</div>
</div>
<div class="form-group col-md-12">
<textarea class="form-control" rows="5" name="mensagem" id="mensagem" placeholder="Mensagem" tabindex="7"></textarea>
</div>
<div class="clear"></div>
<div class="form-group col-md-12">
<div class="linha_topo_orc">
<div class="row">
<div class="nome_desktop">
<p class="exp" style="text-align: center;">Selecione</p>
</div>
<div class="nome_smartphone text-center-mobile">
<div class="col-md-12">
<div class="col-md-2">
<p class="exp"> </p>
</div>
<div class="col-md-2">
<p class="exp">Espécie</p>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<p class="exp">Quant.</p>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<p class="exp">Tamanho</p>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<p class="exp">Preço</p>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<p class="exp">Total</p>
</div>
</div>
</div>
</div>
</div>
<!-- <label for="id_item_up[]" generated="true" class="error" style="display:none;"></label> -->
<div class="linha_orc">
<div class="row">
<div style="visibility: hidden; height: 1px;">
<input name="id_item_up[33]" id="id_item_up[33]" class="checkbox-custom" type="checkbox" value="33" style="width:50%;" tabindex="18" checked>
</div>
<div class="col-md-2">
<img src="/projetos/centraldopeixe/images/especies/orc/4a42e1b24720547d3082481bccb02ad5.jpg" style="margin-top: 15%;">
</div>
<div class="col-md-2 no_padding">
<div class="nome_smartphone">
<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Tilápia</div>
</div>
<div class="nome_desktop">
<p class="nome_esp input_esp">Tilápia</p>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="quantidade[33]" id="quantidade[33]" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<div class="form_select_config fs_pedido">
<select name="tamanho[33]" id="tamanho[33]" class="s_pedido">
<option value="" selected="selected" disabled="disabled">Tamanho</option>
<option value="Alevino">Alevino</option>
<option value="Juvenil">Juvenil</option>
<option value="Adulto">Adulto</option>
</select>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="preco[33]" id="preco[33]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="total[33]" id="total[33]" class="form-control input_qtde valor_total_orc" placeholder="Total"/>
</div>
<div style="visibility: hidden; height: 1px;">
<input name="id_item_up[7]" id="id_item_up[7]" class="checkbox-custom" type="checkbox" value="7" style="width:50%;" tabindex="18" checked>
</div>
<div class="col-md-2">
<img src="/projetos/centraldopeixe/images/especies/orc/23996772607f968bd784686d66c1348a.jpg" style="margin-top: 15%;">
</div>
<div class="col-md-2 no_padding">
<div class="nome_smartphone">
<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Black Bass</div>
</div>
<div class="nome_desktop">
<p class="nome_esp input_esp">Black Bass</p>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="quantidade[7]" id="quantidade[7]" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<div class="form_select_config fs_pedido">
<select name="tamanho[7]" id="tamanho[7]" class="s_pedido">
<option value="" selected="selected" disabled="disabled">Tamanho</option>
<option value="Alevino">Alevino</option>
<option value="Juvenil">Juvenil</option>
<option value="Adulto">Adulto</option>
</select>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="preco[7]" id="preco[7]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="total[7]" id="total[7]" class="form-control input_qtde valor_total_orc" placeholder="Total"/>
</div>
<div style="visibility: hidden; height: 1px;">
<input name="id_item_up[8]" id="id_item_up[8]" class="checkbox-custom" type="checkbox" value="8" style="width:50%;" tabindex="18" checked>
</div>
<div class="col-md-2">
<img src="/projetos/centraldopeixe/images/especies/orc/d7aff9de2ff60eade6cb39a35b1dec75.jpg" style="margin-top: 15%;">
</div>
<div class="col-md-2 no_padding">
<div class="nome_smartphone">
<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Cachara</div>
</div>
<div class="nome_desktop">
<p class="nome_esp input_esp">Cachara</p>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="quantidade[8]" id="quantidade[8]" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<div class="form_select_config fs_pedido">
<select name="tamanho[8]" id="tamanho[8]" class="s_pedido">
<option value="" selected="selected" disabled="disabled">Tamanho</option>
<option value="Alevino">Alevino</option>
<option value="Juvenil">Juvenil</option>
<option value="Adulto">Adulto</option>
</select>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="preco[8]" id="preco[8]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" name="total[8]" id="total[8]" class="form-control input_qtde valor_total_orc" placeholder="Total"/>
</div>
</div>
</div>
<div class="linha_orc">
<div class="row">
<div class="col-md-12">
<div style="visibility: hidden; height: 1px;"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2">
<div class="fundo_cinza">
<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important; color: #0C3052; margin-top: 24px;">Total</div>
</div>
</div>
<div class="col-md-2">
<input type="text" name="total" id="total" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total"/>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="reset" title="Limpar" value="Limpar" id="btn_limpar" name="limpar" class="btn_limpar">
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" title="Enviar" value="Enviar" id="btn_submit" name="enviar" id="enviar">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" title="Imprimir" value="Imprimir" id="btn_submit" name="imprimir" id="imprimir">
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</form>
.pedido_desktop,
.nome_desktop {
display: block;
}
.pedido_smartphone,
.nome_smartphone {
display: none;
}@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 769px) and (max-width: 991px) {}
@media (min-width: 481px) and (max-width: 768px) {
.pedido_desktop,
.nome_desktop {
display: none;
}
.pedido_smartphone,
.nome_smartphone {
display: block;
}
}@media only screen and (max-width: 480px) {
.pedido_desktop,
.nome_desktop {
display: none;
}
.pedido_smartphone,
.nome_smartphone {
display: block;
}
}$(".real").maskMoney({
prefix: 'R$ ',
thousands: '.',
decimal: ',',
affixesStay: true
});
function rePlace(i) {
return parseFloat(i.replace(/[^\d.,]/g, "").replace('.', '').replace(',', '.'));
}
Number.prototype.formataReal = function(c, d, t) {
var n = this,
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) : "");
};//any time the amount changes
$(document).ready(function() {
$('.qtde_orc, .valor_orc').change(function(e) {
var valor_total_orc = 0;
var $row = $(this).parent();
var valor_orc = rePlace($row.find('.valor_orc').val());
var qtde_orc = $row.find('.qtde_orc').val();
valor_total_orc = parseFloat(valor_orc * qtde_orc);
//update the row total
$row.find('.valor_total_orc').val('R$ ' + (valor_total_orc).formataReal(2, ',', '.'));
var total_geral = 0;
$('.valor_total_orc').each(function() {
//Get the value
var tg = rePlace($(this).val());
//if it's a number add it to the total
if (IsNumeric(tg)) {
total_geral += parseFloat(tg);
}
});
$('.total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.'));
});
});
function IsNumeric(input) {
return !isNaN(parseFloat(input)) && isFinite(input);
Se alguém puder dar uma luz de onde pode estar o problema, eu agradeço.
O replace dá erro "Uncaught TypeError: Cannot read property 'replace' of undefined".
Se eu remover o replace e der um alert no qtde_orc, ele retorna undefined.
Só a formatação muda aqui.Discussão (0)
Carregando comentários...