Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Fabiano

[Resolvido] Soma de campo em R$

Por , em Javascript

Recommended Posts

Douglas Fabiano    0

Douglas Fabiano
Postado

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

klonder    14

klonder
Postado

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

Douglas Fabiano    0

Douglas Fabiano
Postado

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

klonder    14

klonder
Postado

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

Douglas Fabiano    0

Douglas Fabiano
Postado

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

William Bruno    1501

William Bruno
Postado 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

alex.almeida    0

alex.almeida
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@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    1

DannyND
Postado

@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

William Bruno    1501

William Bruno
Postado 
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

DannyND    1

DannyND
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@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

Gilberto Nogueira de Almeida    0

Gilberto Nogueira de Almeida
Postado
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
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito