Jump to content
Jack Oliveira

[RESOLVIDO ] Calculo em tempo real com porcentagem e trazendo valor da porcentagem

Recommended Posts

Ola pessoal boa noite

Antes estava querendo fazer os calculo por porcentagem deu certo ate aqui

Bom o que eu preciso agora é pegar o valor que foi feito a porcentagem

Ex:

Valor: 2000

Porcentagem: 25%

Total Desconto: 500,00

Valor Total: 1.500,00

 

Quero pegar o valor do desconto

E também nos inputs quando digitar o valor da porcentagem ele já preencher os outro campos que seria

Total de Desconto e

Valor Total

No script esta da seguinte forma

 

<script type="text/javascript">
function calcValor(){
    // zerando total
    document.getElementById("total").value = '0';
 
    // valor líquido
    var VTOTALLIQUIDO = parseFloat(document.getElementById("valor1").value);
 
    // desconto em porcentagem
    var DESCONTO1 = parseFloat(document.getElementById("desconto1").value);
    if( isNaN ( DESCONTO1 ) ){
    	DESCONTO1 = 0;
    }
    var PDESCONTO = parseFloat( ( VTOTALLIQUIDO * DESCONTO1 ) / 100 );
 
    // desconto em valor
    var VDESCONTO = parseFloat(document.getElementById("desconto2").value);
    if( isNaN ( VDESCONTO ) ){
    	VDESCONTO = 0;
    }
 
    var TOTAL = parseFloat(VTOTALLIQUIDO) - parseFloat(PDESCONTO) - parseFloat(VDESCONTO);
 
    document.getElementById("total").value = 'R$ ' + TOTAL.toFixed(2);
}
</script>

Neste aqui seria para ele trazer o valor do desconto que foi feito...

    // desconto em valor
    var VDESCONTO = parseFloat(document.getElementById("desconto2").value);
    if( isNaN ( VDESCONTO ) ){
    	VDESCONTO = 0;
    }

Segue o HTML

<form class="selectable" method="post" action="?AddCategoria" enctype="multipart/form-data">
		<div class="col-md-6">
			<div class="form-group">
		<label>Titulo:</label>
				<input class="form-control" name="categoria" required>
			</div>
		</div>
	<div class="col-md-6">
		<div class="form-group">
	<label>Valor:</label>
			<input class="form-control" id="valor1" name="valor1" value="2000">
		</div>
	</div>
		<div class="col-md-6">
			<div class="form-group">
			<label>Desconto: <em>%</em></label>
					<input class="form-control" id="desconto1" name="desconto1" max="100" onblur="calcValor()">
			</div>
		</div>											
		<div class="col-md-6">
			<div class="form-group">
			<label>Total de Desconto: <em>R$</em></label>
					<input class="form-control" id="desconto2" name="desconto2" readonly>
			</div>
		</div>
		<div class="col-md-6">
			<div class="form-group">
		<label>Valor Total:</label>
				<input class="form-control"  id="total" name="total" value="0.00">
			</div>
		</div>
		<div class="col-md-12">
			<center><hr>
		<button class="btn btn-primary">Adicionar</button>
				<br><br>
			</center>
		</div>
</form>

 

Se puder de como fazer para que quando digitar o valor ex:

Valor: 2000

ele ficar assim

Valor: 2.000,00

isso no valor total também 

para que seja gravado no banco 2.000,00

 

Se alguém poder me dar uma solução no script fico grato...

Share this post


Link to post
Share on other sites

@Jack Oliveira

 

Fala fera, beleza, fiz o que você precisa.

 

Como eu não tinha o CSS, fiz um simples apenas para ficar melhor a visualização, mas basta adaptar ao seu código ai.

 

INDEX.PHP

<html>
<head>
<!-- Meta -->
    <meta charset="UTF-8">
    <meta name="author" content="Felipe Guedes Coutinho Hashimoto">
    <meta name="description" content="Calculo com Percentual e Formatação Numérida de Moeda">
    <meta name="keywords" content="Calculo Percentual Formatação Moeda">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Link CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Script's Java -->
    <script type="text/javascript" src="js/js_calc.js"></script>
<!-- Título -->
    <title>Calcular Percentual</title>
</head>
<div class="container">
    <form class="selectable" method="POST" action="AddCategoria.php" enctype="multipart/form-data">
        <div class="col-md-6">
            <div class="form-group">
                <label>Produto:</label>
                <input type="search" class="form-control" id="categoria" name="categoria" placeholder="Nome do Produto" required autofocus />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Valor:</label>
                <input type="search" class="form-control" id="valor" name="valor" placeholder="Valor do Produto" OnKeyUp="calcValor();" OnKeyPress="return(MascaraMoeda(this,'.',',',event));" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Desconto: <em>%</em></label>
                <input type="search" class="form-control" id="desconto" name="desconto" placeholder="Valor percentual de desconto" OnKeyUp="calcValor();" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Total de Desconto: <em>R$</em></label>
                <input type="search" class="form-control" id="totalDesc" name="totalDesc" placeholder="Valor do desconto" readonly />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Valor Total:</label>
                <input type="search" class="form-control"  id="total" name="total" placeholder="Valor total do produto" readonly />
            </div>
        </div>
        <div class="col-md-12">
            <center>
                <hr><button class="btn btn-primary">Adicionar</button>
            </center>
        </div>
    </form>
</div>
</body>
</html>

CSS/STYLE.CSS

.container {
    width: 100vw;
    height: 100vh;
    background: #87CEFA;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: white;
    color: #6495ED;
}

label {
    display: inline-flex;
    width: 300px;
}

button {
    border: none;
    padding: 8px 24px;
    border-radius: 12px;
    background-color: #008CBA;
    text-decoration: none;
	color: white;
    opacity: 0.6;
}
button:hover {
    opacity: 1;
    border: none;
    padding: 8px 24px;
    border-radius: 12px;
    background-color: #008CBA;
    text-decoration: none;
	color: white;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

JS/JS_CALC.JS

function calcValor(){
    //Obter valor digitado do produto
    var valor_produto = document.getElementById("valor").value;
	
	//Remover ponto e trocar a virgula por ponto
	while (valor_produto.indexOf(".") >= 0) { valor_produto = valor_produto.replace(".", ""); }
	valor_produto = valor_produto.replace(",",".");
    
	//Obter valor digitado do desconto
    var desconto_produto = document.getElementById("desconto").value;
	
	//Remover ponto e trocar a virgula por ponto
	while (desconto_produto.indexOf(".") >= 0) { desconto_produto = desconto_produto.replace(".", ""); }
	desconto_produto = desconto_produto.replace(",",".");
	
	if (desconto_produto < 0) {
        desconto_produto = 0;
		document.getElementById("desconto").value = desconto_produto;
	}
	
	if (desconto_produto > 100) {
        desconto_produto = 100;
		document.getElementById("desconto").value = desconto_produto;
	}
	
	//Converter o valor do desconto em percentual
	var percent_desconto = parseFloat(desconto_produto / 100);
	
	//Calcular o valor
	if (percent_desconto > 0 && percent_desconto < 100 && valor_produto > 0) {
        var calc_total_desc = parseFloat(valor_produto) * percent_desconto;
    } else {
        var calc_total_desc = 0;
    }
	
	//Formatação do valor total de desconto em padrão moeda Pt-Br
	var numero = calc_total_desc.toFixed(2).split('.');
    numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
	document.getElementById("totalDesc").value = numero.join(',');
	
	//calc_total_produto = parseFloat(valor_produto) - (parseFloat(valor_produto) * parseFloat(desconto_produto / 100));
	
	if (valor_produto > 0 && desconto_produto > 0) {
        calc_total_produto = parseFloat(valor_produto) - (parseFloat(valor_produto) * parseFloat(desconto_produto / 100));
	    var numero = calc_total_produto.toFixed(2).split('.');
        numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
	    document.getElementById("total").value = numero.join(',');
    } else {
        if (valor_produto > 0) {
            document.getElementById("total").value = document.getElementById("valor").value;
        } else {
            document.getElementById("total").value = "0,00";
		}
    }
}
function MascaraMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){
    var sep = 0;
    var key = '';
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = '0123456789';
    var aux = aux2 = '';
    var whichCode = (window.Event) ? e.which : e.keyCode;
    if (whichCode == 13) return true;
    key = String.fromCharCode(whichCode); // Valor para o código da Chave
    if (strCheck.indexOf(key) == -1) return false; // Chave inválida
    len = objTextBox.value.length;
    for(i = 0; i < len; i++)
        if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break;
    aux = '';
    for(; i < len; i++)
        if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i);
    aux += key;
    len = aux.length;
    if (len == 0) objTextBox.value = '';
    if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux;
    if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux;
    if (len > 2) {
        aux2 = '';
        for (j = 0, i = len - 3; i >= 0; i--) {
            if (j == 3) {
                aux2 += SeparadorMilesimo;
                j = 0;
            }
            aux2 += aux.charAt(i);
            j++;
        }
        objTextBox.value = '';
        len2 = aux2.length;
        for (i = len2 - 1; i >= 0; i--)
        objTextBox.value += aux2.charAt(i);
        objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
    }
    return false;
}

Crie a árvore de pastas como segue abaixo:

 

RAIZ

|_______ CSS

                |_______ STYLE.CSS

|_______ JS

                |_______ JS_CALC.JS

|_______ INDEX.PHP

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites
3 horas atrás, Felipe Guedes Coutinho disse:

@Jack Oliveira

 

Fala fera, beleza, fiz o que você precisa.

 

Como eu não tinha o CSS, fiz um simples apenas para ficar melhor a visualização, mas basta adaptar ao seu código ai.

 

INDEX.PHP


<html>
<head>
<!-- Meta -->
    <meta charset="UTF-8">
    <meta name="author" content="Felipe Guedes Coutinho Hashimoto">
    <meta name="description" content="Calculo com Percentual e Formatação Numérida de Moeda">
    <meta name="keywords" content="Calculo Percentual Formatação Moeda">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Link CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Script's Java -->
    <script type="text/javascript" src="js/js_calc.js"></script>
<!-- Título -->
    <title>Calcular Percentual</title>
</head>
<div class="container">
    <form class="selectable" method="POST" action="AddCategoria.php" enctype="multipart/form-data">
        <div class="col-md-6">
            <div class="form-group">
                <label>Produto:</label>
                <input type="search" class="form-control" id="categoria" name="categoria" placeholder="Nome do Produto" required autofocus />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Valor:</label>
                <input type="search" class="form-control" id="valor" name="valor" placeholder="Valor do Produto" OnKeyUp="calcValor();" OnKeyPress="return(MascaraMoeda(this,'.',',',event));" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Desconto: <em>%</em></label>
                <input type="search" class="form-control" id="desconto" name="desconto" placeholder="Valor percentual de desconto" OnKeyUp="calcValor();" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Total de Desconto: <em>R$</em></label>
                <input type="search" class="form-control" id="totalDesc" name="totalDesc" placeholder="Valor do desconto" readonly />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Valor Total:</label>
                <input type="search" class="form-control"  id="total" name="total" placeholder="Valor total do produto" readonly />
            </div>
        </div>
        <div class="col-md-12">
            <center>
                <hr><button class="btn btn-primary">Adicionar</button>
            </center>
        </div>
    </form>
</div>
</body>
</html>

CSS/STYLE.CSS


.container {
    width: 100vw;
    height: 100vh;
    background: #87CEFA;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: white;
    color: #6495ED;
}

label {
    display: inline-flex;
    width: 300px;
}

button {
    border: none;
    padding: 8px 24px;
    border-radius: 12px;
    background-color: #008CBA;
    text-decoration: none;
	color: white;
    opacity: 0.6;
}
button:hover {
    opacity: 1;
    border: none;
    padding: 8px 24px;
    border-radius: 12px;
    background-color: #008CBA;
    text-decoration: none;
	color: white;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

JS/JS_CALC.JS


function calcValor(){
    //Obter valor digitado do produto
    var valor_produto = document.getElementById("valor").value;
	
	//Remover ponto e trocar a virgula por ponto
	while (valor_produto.indexOf(".") >= 0) { valor_produto = valor_produto.replace(".", ""); }
	valor_produto = valor_produto.replace(",",".");
    
	//Obter valor digitado do desconto
    var desconto_produto = document.getElementById("desconto").value;
	
	//Remover ponto e trocar a virgula por ponto
	while (desconto_produto.indexOf(".") >= 0) { desconto_produto = desconto_produto.replace(".", ""); }
	desconto_produto = desconto_produto.replace(",",".");
	
	if (desconto_produto < 0) {
        desconto_produto = 0;
		document.getElementById("desconto").value = desconto_produto;
	}
	
	if (desconto_produto > 100) {
        desconto_produto = 100;
		document.getElementById("desconto").value = desconto_produto;
	}
	
	//Converter o valor do desconto em percentual
	var percent_desconto = parseFloat(desconto_produto / 100);
	
	//Calcular o valor
	if (percent_desconto > 0 && percent_desconto < 100 && valor_produto > 0) {
        var calc_total_desc = parseFloat(valor_produto) * percent_desconto;
    } else {
        var calc_total_desc = 0;
    }
	
	//Formatação do valor total de desconto em padrão moeda Pt-Br
	var numero = calc_total_desc.toFixed(2).split('.');
    numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
	document.getElementById("totalDesc").value = numero.join(',');
	
	//calc_total_produto = parseFloat(valor_produto) - (parseFloat(valor_produto) * parseFloat(desconto_produto / 100));
	
	if (valor_produto > 0 && desconto_produto > 0) {
        calc_total_produto = parseFloat(valor_produto) - (parseFloat(valor_produto) * parseFloat(desconto_produto / 100));
	    var numero = calc_total_produto.toFixed(2).split('.');
        numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.');
	    document.getElementById("total").value = numero.join(',');
    } else {
        if (valor_produto > 0) {
            document.getElementById("total").value = document.getElementById("valor").value;
        } else {
            document.getElementById("total").value = "0,00";
		}
    }
}
function MascaraMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){
    var sep = 0;
    var key = '';
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = '0123456789';
    var aux = aux2 = '';
    var whichCode = (window.Event) ? e.which : e.keyCode;
    if (whichCode == 13) return true;
    key = String.fromCharCode(whichCode); // Valor para o código da Chave
    if (strCheck.indexOf(key) == -1) return false; // Chave inválida
    len = objTextBox.value.length;
    for(i = 0; i < len; i++)
        if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break;
    aux = '';
    for(; i < len; i++)
        if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i);
    aux += key;
    len = aux.length;
    if (len == 0) objTextBox.value = '';
    if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux;
    if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux;
    if (len > 2) {
        aux2 = '';
        for (j = 0, i = len - 3; i >= 0; i--) {
            if (j == 3) {
                aux2 += SeparadorMilesimo;
                j = 0;
            }
            aux2 += aux.charAt(i);
            j++;
        }
        objTextBox.value = '';
        len2 = aux2.length;
        for (i = len2 - 1; i >= 0; i--)
        objTextBox.value += aux2.charAt(i);
        objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
    }
    return false;
}

Crie a árvore de pastas como segue abaixo:

 

RAIZ

|_______ CSS

                |_______ STYLE.CSS

|_______ JS

                |_______ JS_CALC.JS

|_______ INDEX.PHP

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

 

Obrigado @Felipe Guedes Coutinho Pela ajuda.... agradecido mano...

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.