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

Jack Oliveira · Outubro 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 · Outubro 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 · Outubro 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...

Entrar

Arquivado

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

Recommended Posts

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Guedes Coutinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante