Ir para conteúdo
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?...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Editado por alex.almeida
Remover quote desnecessário

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros sites
function getMoney( el ){
var money = id( el ).value ? id( el ).value.replace( ',', '.' ) : 0;
return parseFloat( money )*100;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>
Editado por DannyND

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

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