[Resolvido] Soma nos input em php + jQuery

beowlf · Novembro 29, 2011

E ai pessoal nao sei se aqui é o lugar certo de postar eu procurei em varios forum e nao achei um jeito ou uma ideia de fazer isso

tenho um formulario e nesse formulario tenho a opcao de selecionar a porcentagem e o usuario coloca valores nos campos e o total ja gera automatico

o valor final...

o cara selecionae 30%

pericia = R$ 20.00

Correios = R$ 50.00

B.O = R$ 60.00

total 20+50+60+30% = R$169.00

alguem pode me ajudar nesse problema....

<H3>CADASTRO DE ATENDIMENTO</H3><br />
<form action="" method="post">
<fieldset>
<legend>DESPESAS</legend>
    <label><span>Porcentagem:</span><select name="porcentagem"> 
	<option>Selecione</option>
     <option>30%</option>
  	<option>25%</option>
       <option>20%</option>
		</select></label>
 	<label><span>Perícia - R{:content:}lt;/span><input type="text" name="pericia"  /><span style="margin-left:100px;" >P.H - R{:content:}lt;/span><input type="text" name="ph"  /></label></label>  
 	<label><span>Cart. - R{:content:}lt;/span><input type="text" name="cart"  /><span style="margin-left:100px;" >B.O - R{:content:}lt;/span><input type="text" name="bo"  /></label></label>  
 	<label><span>Correios - R{:content:}lt;/span><input type="text" name="correios"  /><span style="margin-left:100px;" >Outros - R{:content:}lt;/span><input type="text" name="outros"  /></label></label>
 	<label><span>Total:</span><input type="text" size="20" name="valor_total" disabled="disabled"/></label>
    </label>  	
</fieldset>
               </form>

Obrigado!!!

Lucas Peperaio · Novembro 29, 2011

Pelo o que eu entendi, você quer somar 30% do valor certo?

Ai está a lógica, estude-a e adapte ao seu caso

<?php
  $soma = 20+50+60; 
  $porcentagem = (30/100)*$soma;
  $total = $soma+$porcentagem;
  echo $total;
?>

Henrique Barcelos · Novembro 29, 2011

Pra que o PHP?

Faz a soma com Javascript mesmo.

Antes de tudo, coloque um atributo "value" nas opões do select:

<select name="porcentagem"> 
               <option value="">Selecione</option>
            <option value="0.3">30%</option>
               <option value="0.25">25%</option>
              <option value="0.2">20%</option>
                       </select>

Depois coloque isso no Javascript:

$(function () {
$('input[name=pericia], input[name=cart], input[name=correios], select[name=porcentagem').change(function () {
   	var pericia = parseFloat($('input[name=pericia]').val());
   	var cart = parseFloat($('input[name=cart]').val());
   	var correios = parseFloat($('input[name=correios]').val());
   	var porcentagem = parseFloat($('select[name=porcentagem]').val());

   	var parcial = pericia + cart + correios;
   	var total = parcial + parcial * porcentagem;

   	$('input[name=valor_total]').val(total);
});
});

Lucas Peperaio · Novembro 29, 2011

Pra que o PHP?

Eu só coloquei em PHP pra mostrar a lógica ^_^

Detalhe beowlf, caso siga a dica do Henrique, não se esqueça de incluir a biblioteca jQuery em seu código, caso não tenha feito

beowlf · Novembro 30, 2011

E ai galera beleza...

acho que eu nao fui feliz na minha explicação, acabei vendo tinha uns erros, pra tentar ser mais claro

eu postei o meu formulario nesse site Meu Formulario

ali vcs vao ter uma ideia de como vai funcionar

abaixo vo postar o codigo do meu formulario

<style type="text/css">
/*FORMUL?RIOS*/
form fieldset{
border:1px solid #DDD;
padding:10px;
}

form fieldset label, span, input, textarea, select{
float:left;
}

form fieldset label{
width:100%;
margin-bottom:10px;
}

form fieldset label span{
font:normal 12px Arial;
width:200px;
margin:6px 0 0 0;
}

form fieldset  label input, select, texarea{
font:normal 12px Arial;
color:#666;
padding:5px;
border:1px solid #DDD;
}

legend{
font:normal 12px Arial;
color:#666;
padding:5px;
border:1px solid #DDD;
margin-top:5px;
}

.submit input{
font:bold 12px Arial !important;
color:#000 !important;
cursor:pointer;
}

h3{
font:bold 25px Arial, Geneva, sans-serif;	
color:#333;
margin-bottom:-10px;
color:#09A5E8;
}

#target{
float:left;
width:100%;
padding:15px 0;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário</title>

</head>

<body>
<form action="" method="">
<fieldset>
<legend>DESPESAS</legend>

 <label><span>Porcentagem:</span><select name="porcentagem"> 
	<option>Selecione</option>
	<option value="">Selecione</option>
            <option value="0.3">30%</option>
               <option value="0.25">25%</option>
              <option value="0.2">20%</option>

		</select></label>
	  <label><span>Valor Pleteado - R$</span><input type="text" name="valor_pleteado"  /><span style="margin-left:100px;" >Valor Recebido - R$</span><input type="text" name="valor_recebido"  /></label> 
  <label><span>Pericia - R$</span><input type="text" name="pericia"  /><span style="margin-left:100px;" >P.H - R$</span><input type="text" name="ph"  /></label>
  <label><span>Cart. - R$</span><input type="text" name="cart"  /><span style="margin-left:100px;" >B.O - R$</span><input type="text" name="bo"  /></label>
  <label><span>Correios - R$</span><input type="text" name="correios"  /><span style="margin-left:100px;" >Outros - R$</span><input type="text" name="outros"  /></label>
  <label><span>Total da Indenizacao:</span><input type="text" size="20" name="valor_total" disabled="disabled"/><span  style="margin-left:100px;">Despesas:</span><input type="text" size="20" name="despesa" disabled="disabled"/></label>

</fieldset>
	</form>
	</body>
</html>

a soma é a seguinte

o valor pleteado é informado mas, nao vamos usar ele

o valor recebido é informado pq ele vai ser usado para calcular o valor da indenizacao

o calculo das despesa é

Pericia,P.H, Cart., B.O, Correios, Outros sao tudo despesa

intaum tudo que o usuario colocar de valor a nesses itens tem que sair o resultado ali em despesas.

para calcular o valor da indenizacao é o (valor recebido menos a porcentagem) = (um valor) + despesa

que da o valor da indenizacao...

acredito que seja isso

Valeu gente... obrigado pela ajuda ate agora....

Henrique Barcelos · Novembro 30, 2011

Tentou implementar a solução que eu sugeri?

beowlf · Novembro 30, 2011

eu nem tentei pq como eu tinha explicado errado o contexto e faltava informacao pra colocar

achei melhor postar denovo e com todas as informacoes pq assim nao falta nenhum dado...

Henrique Barcelos · Novembro 30, 2011

Pelo menos leia o código... Já te dá uma idéia de como fazer...

beowlf · Novembro 30, 2011

eu li seu codigo por isso eu postei tudo denovo...

Henrique Barcelos · Novembro 30, 2011

Comece fazendo a alteração no SELECT que eu sugeri...

Depois pegue os valores digitados em cada campo que necessita ser somado e some.

Com essa soma em mãos, some a porcentagem selecionada. ^_^

beowlf · Novembro 30, 2011

da uma olhada la no site do formulario que eu postei

ta dando uns errinho

Formulario

mas ta ficando legal...

galera olha como ta o codigo ta dando uns erro nada haver

ele nao somo as despesa e nem o valor total

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">  



$(function () {
       $('input[name=pericia], input[name=cart], input[name=correios], input[name=bo], input[name=correios], input[name=outros], select[name=porcentagem').change(function () {
       var pericia = parseFloat($('input[name=pericia]').val());
       var cart = parseFloat($('input[name=cart]').val());
       var correios = parseFloat($('input[name=correios]').val());
	var bo = parseFloat($('input[name=bo]').val());
	var ph = parseFloat($('input[name=ph]').val());
	var outros = parseFloat($('input[name=outros]').val());
       var porcentagem = parseFloat($('select[name=porcentagem]').val());

       var parcial = pericia + cart + correios + ph + bo + outros;
       var total = parcial + parcial * porcentagem;

       $('input[name=valor_total]').val(total);
       });
});

</script>

ta faltando isso

precisa tbm calcular a despesa

para calcular o valor da indenizacao é o (valor recebido menos a porcentagem) = (um valor) + despesa

desculpa gente mas jQuery eu fico muito a desejar.... :(

valeu..

consegui chegar nisso

	$(function () {
       $('input[name=pericia], input[name=cart], input[name=valor_recebido], input[name=correios], input[name=bo], input[name=correios], input[name=outros], select[name=porcentagem').change(function () {
       var pericia = parseFloat($('input[name=pericia]').val());
       var cart = parseFloat($('input[name=cart]').val());
	var valor_recebido = parseFloat($('input[name=valor_recebido]').val());
       var correios = parseFloat($('input[name=correios]').val());
	var bo = parseFloat($('input[name=bo]').val());
	var ph = parseFloat($('input[name=ph]').val());
	var outros = parseFloat($('input[name=outros]').val());
       var porcentagem = parseFloat($('select[name=porcentagem]').val());


       var despesa = (pericia + cart + correios + ph + bo + outros);
       var valor_total = valor_recebido - porcentagem + despesa;

       $('input[name=despesa]').val(despesa);
	 $('input[name=valor_total]').val(valor_total);
       });
});

mas ele ta dando um erro de NaN

e quando eu tiro o valor ele nao diminui automatico..

Henrique Barcelos · Novembro 30, 2011

Veja, está funcionando:

:seta: http://henriquebarcelos.in/blog/2011/11/30/somar-automaticamente-campos-de-um-formulario/

beowlf · Novembro 30, 2011

não está nao instalei ele você coloca os valores mas ele nao acusa nada, nem faz nada tbm...

Formulario

...

William Bruno · Novembro 30, 2011

olha só como está:

<!DOCTYPE html>
2	<html>
3	    <head>

não deveria ter esses números ai.

Aprenda a debugar teu script:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

beowlf · Novembro 30, 2011

to rindo atoa deu certo....

depois de tanto.... aOHAuhAUOHAUO

<style type="text/css">
/*FORMUL?RIOS*/
form fieldset{
border:1px solid #DDD;
padding:10px;
}

form fieldset label, span, input, textarea, select{
float:left;
}

form fieldset label{
width:100%;
margin-bottom:10px;
}

form fieldset label span{
font:normal 12px Arial;
width:200px;
margin:6px 0 0 0;
}

form fieldset  label input, select, texarea{
font:normal 12px Arial;
color:#666;
padding:5px;
border:1px solid #DDD;
}

legend{
font:normal 12px Arial;
color:#666;
padding:5px;
border:1px solid #DDD;
margin-top:5px;
}

.submit input{
font:bold 12px Arial !important;
color:#000 !important;
cursor:pointer;
}

h3{
font:bold 25px Arial, Geneva, sans-serif;	
color:#333;
margin-bottom:-10px;
color:#09A5E8;
}

#target{
float:left;
width:100%;
padding:15px 0;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$(document).ready(function(){
			//Quando o valor do campo mudar...
			$('.calc').change(function(){
				var pericia = parseFloat($('#pericia').val()) || 0.0;
				var cart = parseFloat($('#cart').val()) || 0.0;
				var ph = parseFloat($('#ph').val()) || 0.0;
				var bo = parseFloat($('#bo').val()) || 0.0;
				var correios = parseFloat($('#correios').val()) || 0.0;
				var outros = parseFloat($('#outros').val()) || 0.0;
				var valor_recebido = parseFloat($('#valor_recebido').val()) || 0.0;
				var porcentagem = parseFloat($('#porcentagem').val()) || 0.0;


				//O total é o número de refeições x o valor da refeição
				var total = (valor_recebido * porcentagem);
				var despesa = pericia + cart + correios + bo + ph + outros;

				//Além disso, ainda tempos a gorjeta para o garçom
				valor_total = total + despesa;

				$('#despesa').val(despesa);
				$('#valor_total').val(valor_total);
			});
		});
		});
	</script>
</head>

<body>
<form id="sum-form" action="" method="post">
<fieldset>
<legend>DESPESAS</legend>

 <label><span>Porcentagem:</span><select id="porcentagem" name="porcentagem" class="calc"> 
	 <option value="">Selecione</option>
             <option value="0.3">30%</option>
               <option value="0.25">25%</option>
              <option value="0.2">20%</option>


		</select></label>
	  <label ><span>Valor Pleteado - R$</span><input type="text" name="valor_pleteado"  class="calc"/><span style="margin-left:100px;" >Valor Recebido - R$</span><input type="text" name="valor_recebido" id="valor_recebido" class="calc"/></label> 
  <label for="pericia"><span>Pericia - R$</span><input type="text" name="pericia" id="pericia" class="calc"/><span style="margin-left:100px;" >P.H - R$</span><input type="text" name="ph" id="ph"  class="calc"/></label>
  <label for="cart"><span>Cart. - R$</span><input type="text" name="cart" class="calc" id="cart"/><span style="margin-left:100px;" >B.O - R$</span><input type="text" name="bo" id="bo" class="calc" /></label>
  <label for="correios"><span>Correios - R$</span><input type="text" name="correios" id="correios" class="calc"/><span style="margin-left:100px;" >Outros - R$</span><input type="text" name="outros" id="outros" class="calc"/></label>
  <label for="valor_total"><span>Total da Indenizacao:</span><input type="text" size="20" name="valor_total" class="result" id="valor_total" disabled="disabled"/><span  style="margin-left:100px;">Despesas:</span><input type="text" size="20" name="despesa" id="despesa" class="result" disabled="disabled"/></label>

</fieldset>
	</form>
	</body>
</html>

so gostaria de umas opniao pra melhorar o codigo e quando a pessoa digitar sair formatado para valores...

Formulario

William Bruno · Novembro 30, 2011

o link está quebrado.

NaN significa Not a Number.

você está entrando com os dados em formato americano ?

sendo o ponto, o separador decimal ?

Henrique Barcelos · Novembro 30, 2011

Viu o exemplo que eu postei?

Ele substitui todo NaN por 0.0...

beowlf · Novembro 30, 2011

Formulario

intaum oq ta faltando agora é quando o cara digita os valores ele ja vem formatado exemplo

1.000,05

200,00

pra fica legal

e o valor total e a despesa ja vim no formato tbm..

pq ele nao grava no banco se é gerada a informacao?

William Bruno · Novembro 30, 2011

intaum oq ta faltando agora é quando o cara digita os valores ele ja vem formatado exemplo

faça um replace do ponto por nada, depois da virgula por ponto.

ai você terá convertido para o formato americado. E só então conseguirá fazer o calculo.

pq ele nao grava no banco se é gerada a informacao?

pq o input está como disable. Mude para readonly

beowlf · Novembro 30, 2011

eu nao entendi isso aqui ???

faça um replace do ponto por nada, depois da virgula por ponto

.

Arquivado

[Resolvido] Soma nos input em php + jQuery

Recommended Posts

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

beowlf 0