Ir para conteúdo

POWERED BY:

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 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
    • Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
    • Por Carcleo
      Pessoal,  tenho uma janela popup que vai cobrar toda a tela.
      <div id="personal" class="personal">     <label>Quantas pedras deseja adquirir?</label>          <input type="number" name="rocks" id="rocks" required placeholder="1" max="200">     <a href="<?php echo route('client.buy.raffle',[1]); ?> "><h3>RESERVAR</h3></a> </div> onde tem [1] , no <a href
       
      preciso alterar via JavaScript para o valor colocado no input no momento do clique
       
      Será que tem jeito?
×

Informação importante

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