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

Jack Oliveira · October 9, 2019

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

Felipe Guedes Coutinho · October 9, 2019

@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

Jack Oliveira · October 9, 2019

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

Sign In

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

Recommended Posts

Jack Oliveira 1

Share this post

Link to post

Share on other sites

Felipe Guedes Coutinho 0

Share this post

Link to post

Share on other sites

Jack Oliveira 1

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Criar XML em um diretorio determinado

Como abrir uma tabela com índice criado no mysql

Requisição via Ajax (Help)

Este projeto é oferecido pelas empresas

Este projeto é mantido e patrocinado pelas empresas

Este projeto é apoiado pelas empresas

Forums

Activity

Important Information