Auto calculation Jquery does not work

Asked

Viewed 40 times

0

I have this budget form. I’m taking advantage of the auto calculation of another form, which works perfectly. But I threw it at this other one and it doesn’t do the auto calculus at all. I checked if the field names are right, but it still doesn’t work.

$(".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);
}
.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;
  }
}
<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="includes/enviar_pedido.php">
				<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">	
									<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-md-2">
											<p class="exp">Quant.</p>
										</div>										
										<div class="col-md-2">
											<p class="exp">Tamanho</p>
										</div>
										<div class="col-md-2">
											<p class="exp">Preço</p>
										</div>
										<div class="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 class="row pedido_smartphone">
										<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-xs-12 col-sm-4">
											<img src="/projetos/centraldopeixe/images/especies/orc/4a42e1b24720547d3082481bccb02ad5.jpg" style="margin-top: 15%;">
											<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 0px 8px 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Tilápia</div>
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="quantidade_33" id="quantidade_33" class="form-control input_qtde" placeholder="Quant." />
										</div>											
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<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-4" style="padding-right: 0px;">
											<input type="text" name="preco_33" id="preco_33" class="form-control input_qtde real" placeholder="Preço" />
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="total_33" id="total_33" class="form-control input_qtde real" placeholder="Total" />
										</div>											
									</div>

									<div class="pedido_desktop">
										<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-md-2">
											<input type="text" name="quantidade_33" id="quantidade_33" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
										</div>											
										
										<div class="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-md-2">
											<input type="text" name="preco_33" id="preco_33" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
										</div>
										
										<div class="col-md-2">
											<input type="text" name="total_33" id="total_33" class="form-control input_qtde  valor_total_orc" placeholder="Total"/>
										</div>
									</div>

							
																
						
									<div class="row pedido_smartphone">
										<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-xs-12 col-sm-4">
											<img src="/projetos/centraldopeixe/images/especies/orc/23996772607f968bd784686d66c1348a.jpg" style="margin-top: 15%;">
											<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 0px 8px 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Black Bass</div>
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="quantidade_7" id="quantidade_7" class="form-control input_qtde" placeholder="Quant." />
										</div>											
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<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-4" style="padding-right: 0px;">
											<input type="text" name="preco_7" id="preco_7" class="form-control input_qtde real" placeholder="Preço" />
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="total_7" id="total_7" class="form-control input_qtde real" placeholder="Total" />
										</div>											
									</div>

									<div class="pedido_desktop">
										<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-md-2">
											<input type="text" name="quantidade_7" id="quantidade_7" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
										</div>											
										
										<div class="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-md-2">
											<input type="text" name="preco_7" id="preco_7" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
										</div>
										
										<div class="col-md-2">
											<input type="text" name="total_7" id="total_7" class="form-control input_qtde  valor_total_orc" placeholder="Total"/>
										</div>
									</div>

							
																
						
									<div class="row pedido_smartphone">
										<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-xs-12 col-sm-4">
											<img src="/projetos/centraldopeixe/images/especies/orc/d7aff9de2ff60eade6cb39a35b1dec75.jpg" style="margin-top: 15%;">
											<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 0px 8px 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Cachara</div>
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="quantidade_8" id="quantidade_8" class="form-control input_qtde" placeholder="Quant." />
										</div>											
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<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-4" style="padding-right: 0px;">
											<input type="text" name="preco_8" id="preco_8" class="form-control input_qtde real" placeholder="Preço" />
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="total_8" id="total_8" class="form-control input_qtde real" placeholder="Total" />
										</div>											
									</div>

									<div class="pedido_desktop">
										<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-md-2">
											<input type="text" name="quantidade_8" id="quantidade_8" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
										</div>											
										
										<div class="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-md-2">
											<input type="text" name="preco_8" id="preco_8" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
										</div>
										
										<div class="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 class="row pedido_smartphone">
										<div style="visibility: hidden; height: 1px;">
											<input name="id_item_up_9" id="id_item_up_9" class="checkbox-custom" type="checkbox" value="9" style="width:50%;" tabindex="18" checked>
										</div>
										<div class="col-xs-12 col-sm-4">
											<img src="/projetos/centraldopeixe/images/especies/orc/fa203353a9df93bccade2b15de50869a.jpg" style="margin-top: 15%;">
											<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 0px 8px 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Carpa cabeçuda</div>
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="quantidade_9" id="quantidade_9" class="form-control input_qtde" placeholder="Quant." />
										</div>											
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<div class="form_select_config fs_pedido">                        
												<select name="tamanho_9" id="tamanho_9" 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-4" style="padding-right: 0px;">
											<input type="text" name="preco_9" id="preco_9" class="form-control input_qtde real" placeholder="Preço" />
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="total_9" id="total_9" class="form-control input_qtde real" placeholder="Total" />
										</div>											
									</div>

									<div class="pedido_desktop">
										<div style="visibility: hidden; height: 1px;">
											<input name="id_item_up_9" id="id_item_up_9" class="checkbox-custom" type="checkbox" value="9" style="width:50%;" tabindex="18" checked>
										</div>
										<div class="col-md-2">
											<img src="/projetos/centraldopeixe/images/especies/orc/fa203353a9df93bccade2b15de50869a.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;">Carpa cabeçuda</div>	
											</div>
											<div class="nome_desktop">
												<p class="nome_esp input_esp">Carpa cabeçuda</p>										
											</div>
										</div>

										<div class="col-md-2">
											<input type="text" name="quantidade_9" id="quantidade_9" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
										</div>											
										
										<div class="col-md-2">
											<div class="form_select_config fs_pedido">                        
												<select name="tamanho_9" id="tamanho_9" 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-md-2">
											<input type="text" name="preco_9" id="preco_9" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
										</div>
										
										<div class="col-md-2">
											<input type="text" name="total_9" id="total_9" class="form-control input_qtde  valor_total_orc" placeholder="Total"/>
										</div>
									</div>

							
																
						
									<div class="row pedido_smartphone">
										<div style="visibility: hidden; height: 1px;">
											<input name="id_item_up_20" id="id_item_up_20" class="checkbox-custom" type="checkbox" value="20" style="width:50%;" tabindex="18" checked>
										</div>
										<div class="col-xs-12 col-sm-4">
											<img src="/projetos/centraldopeixe/images/especies/orc/66c8a31b09a9b628b36952247890a4d9.jpg" style="margin-top: 15%;">
											<div style="font-size: 16px; text-align: center; height: 100% !important; padding: 0px 8px 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Jurupoca</div>
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="quantidade_20" id="quantidade_20" class="form-control input_qtde" placeholder="Quant." />
										</div>											
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<div class="form_select_config fs_pedido">                        
												<select name="tamanho_20" id="tamanho_20" 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-4" style="padding-right: 0px;">
											<input type="text" name="preco_20" id="preco_20" class="form-control input_qtde real" placeholder="Preço" />
										</div>
										<div class="col-xs-6 col-sm-4" style="padding-right: 0px;">
											<input type="text" name="total_20" id="total_20" class="form-control input_qtde real" placeholder="Total" />
										</div>											
									</div>

									<div class="pedido_desktop">
										<div style="visibility: hidden; height: 1px;">
											<input name="id_item_up_20" id="id_item_up_20" class="checkbox-custom" type="checkbox" value="20" style="width:50%;" tabindex="18" checked>
										</div>
										<div class="col-md-2">
											<img src="/projetos/centraldopeixe/images/especies/orc/66c8a31b09a9b628b36952247890a4d9.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;">Jurupoca</div>	
											</div>
											<div class="nome_desktop">
												<p class="nome_esp input_esp">Jurupoca</p>										
											</div>
										</div>

										<div class="col-md-2">
											<input type="text" name="quantidade_20" id="quantidade_20" class="form-control input_qtde qtde_orc" placeholder="Quant."/>
										</div>											
										
										<div class="col-md-2">
											<div class="form_select_config fs_pedido">                        
												<select name="tamanho_20" id="tamanho_20" 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-md-2">
											<input type="text" name="preco_20" id="preco_20" class="form-control input_qtde real valor_orc" placeholder="Preço"/>
										</div>
										
										<div class="col-md-2">
											<input type="text" name="total_20" id="total_20" class="form-control input_qtde  valor_total_orc" placeholder="Total"/>
										</div>
									</div>
							</div>
						</div>	

						<div class="linha_orc">
							<div class="row">	
								<div class="col-md-12">
									<div style="visibility: hidden; height: 1px;">&nbsp;</div>
									<div class="col-md-2">&nbsp;</div>
									<div class="col-md-2">&nbsp;</div>										
									<div class="col-md-2">&nbsp;</div>
									<div class="col-md-2">&nbsp;</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>

jquery

  • Have enough code there, consider making a [mcve] to help summarize your doubt and increase your chances of getting a good answer

2 answers

0

There are basically two errors in the code:

$('.total_geral')

The "general total" field has a id and not a class, therefore the correct would be:

$('#total_geral')

Another problem is on the line:

var $row = $(this).parent();

That one .parent() is not finding anything, causing error in function rePlace().

Where you left some class empty (<div class="">) put any name (e.g. put classe1), being like this:

<div class="classe1">

This class that will serve as a reference to find the $row.find('.qtde_orc').val() on the line var $row = $(this).closest(".classe1");.

Anyway, the code goes like this:

$(".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).closest(".classe1");
    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);
}
.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;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script>
<div class="linha_orc">
<div class="row">	

<div class="classe1">
<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="/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]" 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>

<div class="classe1">
<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="/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]" 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>	

<div class="linha_orc">
<div class="row">	
<div class="col-md-12">
<div style="visibility: hidden; height: 1px;">&nbsp;</div>
<div class="col-md-2">&nbsp;</div>
<div class="col-md-2">&nbsp;</div>										
<div class="col-md-2">&nbsp;</div>
<div class="col-md-2">&nbsp;</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_geral" id="total_geral" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total"/>
</div>							
</div>
</div>
</div>

0

$(".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);
}
.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;
  }
}
<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>

							<div class="linha_orc">
								<div class="row">	
																	
							
										<div class="">
											<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="/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]" 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>

								
																	
							
										<div class="">
											<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="/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]" 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>	

							<div class="linha_orc">
								<div class="row">	
									<div class="col-md-12">
										<div style="visibility: hidden; height: 1px;">&nbsp;</div>
										<div class="col-md-2">&nbsp;</div>
										<div class="col-md-2">&nbsp;</div>										
										<div class="col-md-2">&nbsp;</div>
										<div class="col-md-2">&nbsp;</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_geral" id="total_geral" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total"/>
										</div>							
									</div>
								</div>
							</div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.