Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rogerio Pancini

Auto cálculo em Jquery não funciona

Recommended Posts

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">&nbsp;</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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
×

Informação importante

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