Jump to content
Douglas Fabiano

[Resolvido] Soma de campo em R$

Recommended Posts

Olá amigos bom dia,

 

tenho a seguinte situação

 

Preciso somar dois campos e apresentar em um terceiro campo (total), porem os 3 campos tenho que colocar valores em R$.. alguem sabe como fazer ou dar uma dica?

 

ou seja: CAMPO1 + CAMPO2 = TOTAL (MOSTRANDO EM R$)

 

Para inserir em minha base é tranquilo, apenas nunca somei campos em formulário, por isso minha duvida, será qeu dá fazer isso em JavaScript/DHTML?...

Share this post


Link to post
Share on other sites

Com JavaScript é possível somar valores com ponto-flutuante.

Como você quer exibir esses valores? Com pontos, vírgulas?

Share this post


Link to post
Share on other sites

Pessoal fiz um código aqui porem não está somando os campos quando clico em somar, podem dar uma olhada por favor:

 

<body>
<script>
function soma()
{
form.campo4.value = (form.campo1.value*1) + (form.campo2.value*1) + form.campo3.value*1)
}
</script>

<form name="form">
<input name="campo1" /><br />
<input name="campo2" /><br />
<input name="campo3" /><br />
<input name="campo4" readonly/><br />
<input type="button" onclick="soma()" value="Soma de Valores" />
</form>
</body>
</html>

Share this post


Link to post
Share on other sites

Tente converter a entrada das inputs para ponto flutuante com parseFloat; com parseFloat é possível realizar cálculos com ponto flutuante.

Share this post


Link to post
Share on other sites

Amigos resolvi, agora funciona direitinho, ESTAVA COM ERRO NO CÓDIGO MESMO, agora o que eu preciso é jogar isso como valor em R$ tem como (aparecer como mascara mesmo):

 

<body>
<script>
function soma()
{
form.campo4.value = (form.campo1.value*1) + (form.campo2.value*1) + (form.campo3.value*1)
}
</script>

<form name="form">
<input name="campo1" /><br />
<input name="campo2" /><br />
<input name="campo3" /><br />
<input name="campo4" readonly/><br />
<input type="button" onclick="soma()" value="Soma de Valores" />
</form>
</body>
</html>

Share this post


Link to post
Share on other sites

<html>

<head>

<script type="text/javascript">

function id( el ){

return document.getElementById( el );

}

function getMoney( el ){

var money = id( el ).value.replace( ',', '.' );

return parseFloat( money )*100;

}

function soma()

{

var total = getMoney('campo1')+getMoney('campo2')+getMoney('campo3');

id('campo4').value = 'R$ '+total/100;

}

</script>

</head>

<body>

<form action="" method="">

<input name="campo1" id="campo1" value="25,60" /><br />

<input name="campo2" id="campo2" value="5,15" /><br />

<input name="campo3" id="campo3" value="2,63" /><br />

<input name="campo4" readonly="readonly" id="campo4" /><br />

<input type="button" onclick="soma()" value="Soma de Valores" />

</form>

</body>

</html>

  • +1 1

Share this post


Link to post
Share on other sites

Bom dia... Funcionou show de bola só estou com uma dúvida e como estou iniciando pode ser fácil de resolver.

O valor não ficou com formatado no estilo moeda.

Exemplo: 150,87

Gostaria de saber se existe alguma maneira dele apresentar dessa maneira?

Desde já agradeço.

Edited by alex.almeida
Remover quote desnecessário

Share this post


Link to post
Share on other sites

assim por exemplo:

<html>
<head>
<script type="text/javascript">
String.prototype.formatMoney = function() {
    var v = this;

    if(v.indexOf('.') === -1) {
        v = v.replace(/([\d]+)/, "$1,00");
    }

    v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
    v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
    v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

    return v;
};
function id( el ){
    return document.getElementById( el );
}
function getMoney( el ){
    var money = id( el ).value.replace( ',', '.' );
    return parseFloat( money )*100;
}
function soma()
{
    var total = getMoney('campo1')+getMoney('campo2')+getMoney('campo3');
    id('campo4').value = 'R$ '+ String(total/100).formatMoney();
}
</script>
</head>
<body>
    <form action="" method="">
        <input name="campo1" id="campo1" value="25,60" /><br />
        <input name="campo2" id="campo2" value="5,15" /><br />
        <input name="campo3" id="campo3" value="2,63" /><br />
        <input name="campo4" readonly="readonly" id="campo4" /><br />
        <input type="button" onclick="soma()" value="Soma de Valores" />
    </form>
</body>
</html>
  • +1 2

Share this post


Link to post
Share on other sites

@DannyND, ai vc tem q disparar no evento onkeyup de cada input a função que soma.

Share this post


Link to post
Share on other sites

@DannyND, ai você tem q disparar no evento onkeyup de cada input a função que soma.

 

Usei o onkeyup, mas só soma direitinho depois que insere os 2 valores. Como faço para não mostrar o NaN?

<html>
<head>
<script type="text/javascript">
String.prototype.formatMoney = function() {
    var v = this;

    if(v.indexOf('.') === -1) {
        v = v.replace(/([\d]+)/, "$1,00");
    }

    v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
    v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");

    return v;
};
function id( el ){
    return document.getElementById( el );
}
function getMoney( el ){
    var money = id( el ).value.replace( ',', '.' );
    return parseFloat( money )*100;
}
function soma()
{
    var total = getMoney('campo1')+getMoney('campo2');
    id('campo4').value = 'R$ '+ String(total/100).formatMoney();
}
</script>
</head>
<body>
    <form action="" method="">
        <input name="campo1" id="campo1" value="" onkeyup="soma()" /><br />
        <input name="campo2" id="campo2" value=""  onkeyup="soma()"/><br />
        <input name="campo4" readonly="readonly" id="campo4" /><br />
    </form>
</body>
</html>

Share this post


Link to post
Share on other sites
function getMoney( el ){
var money = id( el ).value ? id( el ).value.replace( ',', '.' ) : 0;
return parseFloat( money )*100;
}

 

Share this post


Link to post
Share on other sites

Willian, na verdade estou criando um formulário de checkout com opção para pagamento com 2 cartões.

 

Quando digito o valor no CARTÃO 1, já calculo e exibo o resto no CARTÃO 2.. até ai tudo certinho conforme o post acima, mas preciso também calcular a quantidade de parcelas e exibir em um <select >

 

O valor mínimo para parcelas é de R$ 10,00 sendo de no máximo 12 Parcelas.

 

pagto.jpg

 

Código (um pouco grande por causa da validação rs)

<script type="text/javascript">
String.prototype.formatMoney = function() {
	var v = this;

	if(v.indexOf('.') === -1) {
		v = v.replace(/([\d]+)/, "$1,00");
	}

	v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
	v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");

	return v;
};
function id( el ){
	return document.getElementById( el );
}
function getMoney( el ){
	var money = id( el ).value ? id( el ).value.replace( ',', '.' ) : 0;
	return parseFloat( money )*100;
}
function soma()
{
	var total = getMoney('vl_pedido')-getMoney('vl_pedido1');
	id('vl_pedido2').value = 'R$ '+ String(total/100).formatMoney();
}
</script>

<script type="text/javascript">

$(document).ready(function(){
	$('#cartaov2').validate({
		rules: {
			op_cartao1: { required: true},
			vl_pedido1: { required: true},
			num_cartao1:  { required: true },
			nome_cartao1:  { required: true },
			data_valid1:  { required: true },
			cod_segur1:  { required: true },
			qt_parcelas1:  { required: true },
			op_cartao2: { required: true},
			num_cartao2:  { required: true },
			nome_cartao2:  { required: true },
			data_valid2:  { required: true },
			cod_segur2:  { required: true },
			qt_parcelas2:  { required: true }
		},
		messages: {
			op_cartao1: { required: 'Selecione uma opção de cartão'},
			vl_pedido1: { required: 'Digite o valor para o cartão 1'},
			num_cartao1:{ required: ''},
			nome_cartao1:{ required: ''},
			data_valid1:{ required: ''},
			cod_segur1:{ required: ''},
			qt_parcelas1: { required: 'Selecione uma opção de parcelamento'},
			op_cartao2: { required: 'Selecione uma opção de cartão.'},
			num_cartao2:{ required: ''},
			nome_cartao2:{ required: ''},
			data_valid2:{ required: ''},
			cod_segur2:{ required: ''},
			qt_parcelas2: { required: 'Selecione uma opção de parcelamento'}
		},
		submitHandler: function( form ){
			var dados = $( form ).serialize();

			$.ajax({
				type: "POST",
				url: "processa_cartao2.php",
				data: dados,
				
				success: function( dados ){
					alert( dados );

					if(dados == parseInt("1")){
						window.location="finaliza.php";
					}else{
						$("#contentee").html("<font color='red' size='1'>Cartão inválido!</font>");
						}
					}

			});

			return false;
		}
	});
});
</script>	
<style>
	.loading { display: none; }
	input.error { border: 1px solid #f00; }
</style>

<div id="noticia2">
<h2 class='titulo_noticia'>2 Cartões de Crédito</h2>
<p class='texto_noticia'>
<form name="cartaov2" class="formulario" id="cartaov2" method='post' action=''>
<input type='hidden' name='total_carrinho' value='<?=$total_carrinho?>'>
<input type='hidden' name='sessao' value='<?=session_id()?>'>
<input type='hidden' name='cliente' value='<?=$_SESSION['cmpCD_CLIENTE']?>'>
<input type='hidden' name='vl_pedido' id='vl_pedido' value='<?=money($total_carrinho)?>'>
<table width='100%'>
<tr>
<td width='50%'>
	<table width='100%'>
	<tr><td class='subtitulo_noticia' colspan="2">Cartão de Crédito 1</td></tr>
	<tr><td height='5'></td></tr>
	<tr>
	<td colspan='2' align='center'>
		<table>
		<tr><td colspan="6"><label for="op_cartao1" class="error"></label></td></tr>
		<tr>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" value='visa'>
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/visa.png" WIDTH="52" HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" VALUE="mast">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/master.png" WIDTH="52" HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" VALUE="disc">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/diners.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" VALUE="amex">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/american.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" value="hiper">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/hiper.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao1" value="elo">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/elo.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		</tr>
		</table>
	</td>
	</tr>
	<tr>
		<td class='texto_noticia' align='right'>Valor R$ </td>
		<td>
			<INPUT TYPE="text" NAME="vl_pedido1" id="vl_pedido1" class='input_noticia' maxlength='16' size='29' onkeyup="soma()">
		</td>
	</tr>	
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>número do cartão </td>
		<td><INPUT TYPE="text" NAME="num_cartao1" class='input_noticia' maxlength='16' size='29'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right' width='32%'>nome impresso cartão </td>
		<td><INPUT TYPE="text" NAME="nome_cartao1" class='input_noticia' size='29'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>validade </td>
		<td><INPUT TYPE="text" NAME="data_valid1" class='input_noticia' maxlength='5' size='4'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>cód. segurança </td>
		<td><INPUT TYPE="text" NAME="cod_segur1" class='input_noticia' size='4'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>pagar em: </td>
		<td>
			<select class="selecionar_parc" NAME="qt_parcelas1" class='input_noticia' id="qt_parcelas1">
				<?php
				for ($i = 1; $i <= 12; $i++ )
				{
				   $parcela = ( $vl_pedido1 / $i );

				   if($parcela > $vl_min_parc):
					if ( $parcela < $qt_parc)
						break;
						echo '<option value="'.$i.'">'.$i. " x de R$ ".money($parcela)."<br />";
				   endif;
				}

				?>
			</select>
		</td>
	</tr>
	<tr><td></td><td colspan="2"><label for="qt_parcelas1" class="error"></label></td></tr>
	</table>
</td>
<td width='50%'>
	<table width='100%'>
	<tr><td class='subtitulo_noticia' colspan="2">Cartão de Crédito 2</td></tr>
	<tr><td height='5'></td></tr>
	<tr>
	<td colspan='2' align='center'>
		<table>
		<tr><td colspan="6"><label for="op_cartao2" class="error"></label></td></tr>
		<tr>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" value='visa'>
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/visa.png" WIDTH="52" HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" VALUE="mast">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/master.png" WIDTH="52" HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" VALUE="disc">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/diners.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" VALUE="amex">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/american.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" value="hiper">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/hiper.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		<td class='texto_noticia'>
			<INPUT TYPE="radio" NAME="op_cartao2" value="elo">
		</td>
		<td class='texto_noticia' width='20%'>
			<IMG SRC="images/internas/elo.png"  HEIGHT="26" BORDER="0" ALT="">
		</td>
		</tr>
		</table>
	</td>
	</tr>
	<tr>
		<td class='texto_noticia' align='right'>Valor R$ </td>
		<td>
			<INPUT TYPE="text" NAME="vl_pedido2" id="vl_pedido2" class='input_noticia' maxlength='16' size='29' readonly="readonly">
		</td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>número do cartão </td>
		<td><INPUT TYPE="text" NAME="num_cartao2" class='input_noticia' maxlength='16' size='29'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>nome impresso cartão </td>
		<td><INPUT TYPE="text" NAME="nome_cartao2" class='input_noticia' size='29'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>validade </td>
		<td><INPUT TYPE="text" NAME="data_valid2" class='input_noticia' maxlength='5' size='4'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>cód. segurança </td>
		<td><INPUT TYPE="text" NAME="cod_segur2" class='input_noticia' size='4'></td>
	</tr>
	<tr><td height='5'></td></tr>
	<tr>
		<td class='texto_noticia' align='right'>pagar em: </td>
		<td>
			<select class="selecionar_parc" NAME="qt_parcelas2" class='input_noticia' id="qt_parcelas2">
				<?php
				for ($i = 1; $i <= 12; $i++ )
				{
				   $parcela = ( $vl_pedido1 / $i );

				   if($parcela > $vl_min_parc):
					if ( $parcela < $qt_parc)
						break;
						echo '<option value="'.$i.'">'.$i. " x de R$ ".money($parcela)."<br />";
				   endif;
				}

				?>
			</select>
		</td>
	</tr>
	<tr><td></td><td colspan="2"><label for="qt_parcelas2" class="error"></label></td></tr>
	</table>
</td>
</tr>
<!-- resposta -->
<tr><td></td><td colspan="2"><div id="contentee"></div></td></tr>
<tr>
	<td colspan="3" align='right'>
		<input type="submit" value="" id="enviar" class="botao_fim"/>
	</td>
</tr>

</table>

</form>
</p>
</div>
Edited by DannyND

Share this post


Link to post
Share on other sites

@DannyND, crie um novo tópico. Visto que a sua dúvida já não tem mais relação com este original.

Share this post


Link to post
Share on other sites
Em 05/05/2014 at 16:27, William Bruno disse:

Boa Tarde!

Como seria sem campos fixos e sim varáveis ?

Obrigado,

Gilberto

 

Em 05/05/2014 at 16:27, William Bruno disse:

function getMoney( el ){

var money = id( el ).value ? id( el ).value.replace( ',', '.' ) : 0;

return parseFloat( money )*100;

}

 

Em 27/12/2013 at 16:00, alex.almeida disse:

Boa Tarde!

Neste tópico minha dúvida

Como seria sem campos fixos e sim varáveis ?

Obrigado,

Gilberto

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.