Publicado em 29 de nov.

[Resolvido] Soma nos input em php + jQuery

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!!!

Discussão (23)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Lucas Peperaio· 29 de nov.

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· 29 de nov.

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· 29 de nov.

>
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· 30 de nov.

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

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· 30 de nov.

Tentou implementar a solução que eu sugeri?

beowlf· 30 de nov.

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· 30 de nov.

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

beowlf· 30 de nov.

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

Henrique Barcelos· 30 de nov.

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· 30 de nov.

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· 30 de nov.

Veja, está funcionando:

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

beowlf· 30 de nov.

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

Formulario

...

William Bruno· 30 de nov.

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· 30 de nov.

to rindo atoa deu certo....

depois de tanto.... aOHAuhAUOHAUO

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· 30 de nov.

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· 30 de nov.

Viu o exemplo que eu postei?

Ele substitui todo NaN por 0.0...

beowlf· 30 de nov.

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· 30 de nov.

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· 30 de nov.

eu nao entendi isso aqui ???

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

Henrique Barcelos· 30 de nov.

Exemplo:

'22.222,34'.replace('.', '').replace(',', '.');

Veja no exemplo que eu postei que o parseFloat faz isso pra você automaticamente...

William Bruno· 30 de nov.

>
Exemplo:

'22.222,34'.replace('.', '').replace(',', '.');

Veja no exemplo que eu postei que o parseFloat faz isso pra você automaticamente...

hum ?

alert( parseFloat( '1.500,00' ) );//1.5

me respondeu 1.5, ou seja, nada a ver com os mil e quinhentos que eu queria.

Com o seu exemplo:

alert( parseFloat( '22.222,34' ) ); //22.222

ou seja, perdi os centavos, e ele me respondeu com 22 inteiros, e 222 milésimos

Nada a ver com os meus 22 mil e tantos iniciais

não sei oque você quis dizer Henrique, mas o parseFloat(), não substitui o replace que eu sugeri.

Henrique Barcelos· 30 de nov.

Putz... realmente... Não testei com vígulas e pontos ao mesmo tempo...

Ele funciona assim:

alert(parseFloat('1,50')); //mostra 1.50
alert(parseFloat('1.50')); //mostra 1.50

beowlf· 1 de dez.

valeu obrigado!!!