[Resolvido] Porcentagem

[Chaparro 0]

Boa tarde pessoal beleza...

 

Eu tenho uma página dinamica ontem tem um formulário que tem três campos (inputs)...

 

O primeiro campo é o valor do produto.. O segundo é o desconto aplicado e o terceiro é a conta do valor menos o desconto...

 

Só que não terá botão para calcular essa conta... Assim que colocar o valor (porcentagem) no campo desconto ele automaticamente no valor da conta aparece o resultado...

 

Ou seja...

 

Valor 100,00 ... Valor do desconto 10% ... Resultado R$ 90,00...

 

Alguem pode me ajudar?

 

Obrigado

[Eliseu M. 2]

É melhor com Javascript:

 

- Usando o evento onkeydown, você dispara uma função que irá imprimir o resultado (valor*0.9) no outro campo;

- Para evitar problemas com usuários que não habilitam Javascript, verifique na página que irá receber o formulário, se este tal campo (resultado) tem valor. Se sim, não faça nada, se não, passe o valor com desconto via PHP.

 

JS

<script>
function calcular() {
	campo1 = document.getElementById("campo1").value;
	document.getElementById("resultado").innerHTML=campo1*0.9;
}
</script>
<input type="text" id="campo1" onkeydown="calcular()" />
<div id=resultado></div>

[Chaparro 0]

É melhor com Javascript:

 

- Usando o evento onkeydown, você dispara uma função que irá imprimir o resultado (valor*0.9) no outro campo;

- Para evitar problemas com usuários que não habilitam Javascript, verifique na página que irá receber o formulário, se este tal campo (resultado) tem valor. Se sim, não faça nada, se não, passe o valor com desconto via PHP.

 

JS

<script>
function calcular() {
	campo1 = document.getElementById("campo1").value;
	document.getElementById("resultado").innerHTML=campo1*0.9;
}
</script>
<input type="text" id="campo1" onkeydown="calcular()" />
<div id=resultado></div>

Por exemplo minha estrutura está assim..

<form method="post" action="calculo.php" name="desconto" id="desconto">
<table>
    <tr>
        <td>
         	<input type="text" name="valor" id="valor" width="200" />
        </td>
    </tr>
    <tr>
        <td>
        	<input type="text" name="desconto" id="desconto" width="200" />
        </td>
    </tr>
    <tr>
        <td>
        	<input type="text" name="valor" id="valor" width="200" />
        </td>
    </tr>
</table>
</form>

O que eu quero... Exemplo...

O valor ja vem setado... Exemplo : R$ 100,00

No campo desconto quero un desconto de 10%

E automatico o input de valor faz o calculo do valor com o desconto e printa o valor... EX: 90,00...

[Chaparro 0]

Eu tentei colocar o seu codigo mais não deu certo...

[Ariane Stela 0]

você tem o jquery instalado?

[Chaparro 0]

você tem o jquery instalado?

 

Na verdade nao tenho ele instalado...

 

O que eu queria era realmente um script que fizesse essa conta mais não manjo nada de criar um javascript...

 

A não ser quando pega alguma coisa pronta e implemeta-la..

[Ariane Stela 0]

Instala o jquery.js e inclua na pagina

tente fazer um aqui, deu certo mas nao esta multiplicando float, mas alguém dará um help.

 

<script>
function calcular() {

	 var valor = 0;
		
		var valor = $('#valor').val();
		var desco = $('#desconto').val();
		

		valor = valor * desco;
		
		return parseFloat(valor);
	}

$(document).ready(function(){
	
	$("input[name='desconto']").change(function(){
		$("#total").val(calcular());
	});
});
</script>

 

<form method="post" action="calculo.php" name="lala" id="lala">
<table>
    <tr>
        <td>
                <input type="text" name="valor" id="valor" width="200" />
        </td>
    </tr>
    <tr>
        <td>
                <input type="text" name="desconto" id="desconto" width="200" />
        </td>
    </tr>
    <tr>
        <td>
                <input type="text" name="total" id="total" width="200" />
        </td>
    </tr>
</table>
</form>

[Ariane Stela 0]

Aí oh, fiz um bem lindo pra você:

 

script

function moeda2float(moeda)
{
	//retirar os pontos
	moeda = moeda.replace(".","");

	//mudar a virgula pelo ponto
	moeda = moeda.replace(",",".");

	//retornar em formato float
	return parseFloat(moeda);

}

function float2moeda(num) 
{
	x = 0;

	if(num<0) 
	{
		num = Math.abs(num);
	    x = 1;
	}
	if(isNaN(num)) 
		num = "0";
	
    cents = Math.floor((num*100+0.5)%100);
    num = Math.floor((num*100+0.5)/100).toString();

    if(cents < 10) 
    	cents = "0" + cents;
    
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
       num = num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
    
    ret = num + ',' + cents;
    
    if (x == 1) 
    	ret = ' - ' + ret;
    
    return ret;
}

function calcular() 
{
	var total = 0;
                
	//recuperar o valor e transforma-lo em float
	var valor = $('#valor').val();
	valor = moeda2float(valor);
	
	//recuperar o valor e transforma-lo em porcentagem
	var desco = $('#desconto').val();
	desco = desco/100;
                
	//calcular 
	total = valor * desco;
                
	//retornar o total em formato de moeda
	return float2moeda(total);
}

$(document).ready(function()
{
	//bind do input desconto
	$("input[name='desconto']").keypress(function(){
		$("#total").val(calcular());
    });	$("input[name='desconto']").keyup(function(){
		$("#total").val(calcular());
    });	$("input[name='desconto']").keydown(function(){
		$("#total").val(calcular());
    });
	
    //bind do input valor
	$("input[name='valor']").keypress(function(){
		$("#total").val(calcular());
    });	$("input[name='valor']").keyup(function(){
		$("#total").val(calcular());
    });	$("input[name='valor']").keydown(function(){
		$("#total").val(calcular());
    });
});

 

html:

Teste de jQuery

<form method="post" action="calculo.php" name="calculo" id="calculo">
<table>
    <tr>
        <td>
        	Prim: 
            <input type="text" name="valor" id="valor" width="200" />
        </td>
    </tr>
    <tr>
        <td>
        	Mult: 
			<input type="text" name="desconto" id="desconto" width="200" />
        </td>
    </tr>
    <tr>
        <td>
        	Total: 
			<input type="text" name="total" id="total" width="200" />
        </td>
    </tr>
</table>
</form>

[Chaparro 0]

Bom dia Ariane, Eu testei esse seu codigo, mas não está funcionando não... Não tem os eventos que necessita nos imputs... Eu acabei de testar aqui... coloquei igual o que falo...

 

Segue abaixo

 

	<script>
    function moeda2float(moeda)
	{        
		//retirar os pontos        
		moeda = moeda.replace(".","");        
		//mudar a virgula pelo ponto        
		moeda = moeda.replace(",",".");        
		//retornar em formato float        
		return parseFloat(moeda);
	}
	
	function float2moeda(num) 
	{        
		x = 0;        
	if(num<0)
		{                
			num = Math.abs(num);            
			x = 1;        
		}        
	if(isNaN(num))                 
		num = "0";            
		cents = Math.floor((num*100+0.5)%100);    
		num = Math.floor((num*100+0.5)/100).toString();    
	if(cents < 10)         
		cents = "0" + cents;        
	for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)       
		num = num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));        
		ret = num + ',' + cents;        
	if (x == 1)        
		ret = ' - ' + ret;        
	return ret;
	}	
	
	
	function calcular() 
	{        
		var total = 0;                        
		//recuperar o valor e transforma-lo em float        
		var valor = $('#valor').val();        
		valor = moeda2float(valor);               
		//recuperar o valor e transforma-lo em porcentagem        
		var desco = $('#desconto').val();        
		desco = desco/100;                        
		//calcular         
		total = valor * desco;                    
		//retornar o total em formato de moeda        
		return float2moeda(total);
	}	
		
$(document).ready(function()
{        
//bind do input desconto        
$("input[name='desconto']").keypress(function()
{               
 $("#total").val(calcular());    }); 
 $("input[name='desconto']").keyup(function(){                
 $("#total").val(calcular());    }); 
 $("input[name='desconto']").keydown(function(){                
 $("#total").val(calcular());    });            
 //bind do input valor        
 $("input[name='valor']").keypress(function(){                
 $("#total").val(calcular());    }); 
 $("input[name='valor']").keyup(function(){                
 $("#total").val(calcular());    }); 
 $("input[name='valor']").keydown(function(){                
 $("#total").val(calcular());    
 });
});	
	
	
	
    </script>
    
    
    
    
<form method="post" action="testeMiler.php" name="calculo" id="calculo">
    <table>    
        <tr>        
            <td>                
                Prim:            
                <input type="text" name="valor" id="valor" width="200" />        
            </td>    
        </tr>    
        <tr>        
            <td>                
                Mult:                         
                <input type="text" name="desconto" id="desconto" width="200" />        
            </td>    
        </tr>    
        <tr>        
            <td>                
                Total:                         
                <input type="text" name="total" id="total" width="200" />        
            </td>    
        </tr>
    </table>
</form>    
    

[William Bruno 1501]

para usar:

$(document).ready(function()

você precisa baixar o jQuery:

http://docs.jquery.com/Downloading_jQuery

[Ariane Stela 0]

salve isso no seu projeto: http://code.jquery.com/jquery-1.4.1.js como jquery.js

 

e no lugar do <script> você coloca <script src="caminhodoscript/jquery.js">

[Chaparro 0]

Mesmo com o jquery instalado ele não funcionou...

 

www.milerchaparro.com.br/calculo.php

 

Esse é o link do teste que estou fazendo...

[William Bruno 1501]

não conferi todo o script, mas:

troque:

<script src="js/jquery.js" language="javascript">

por:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

[Chaparro 0]

Poutzzzz... São coisas tão toscas que a gente acaba empacando a toa né...

 

Mais muito obrigado a todos que ajudaram... Muito obrigado mesmo...