1

Até o momento meu código estava usando uma soma dos valores

Exemplo:

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const serv = res.querySelector('[name="serv"]');

inputs.forEach(x => x.addEventListener("change", () => {
    total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
    serv.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
}));
<div id="resultado" class="col">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text bg-primary text-white">Serviços</span>
        </div>
        <input type="text" class="input-group-text" placeholder="0,00" name="total" value="" readonly="readonly">
        <input type="hidden" name="serv" value="">
    </div>
</div>
<div class="form-group">
    <label for="">Desconto: </label>
    <select class="form-control form-control-sm" name="desconto">
        <option value=""></option>
        <option value="5%">Desconto Pai e Filho</option>
        <option value="10%">Amigo da Hora</option>
        <option value="15%">Familia</option>
    </select>
</div>
<br>

<div class="row">
    <table class="table">
        <tbody>
            <tr>
                <td><input type=checkbox class='serv' name="" value="10"> Serviço</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type=checkbox class='serv' name="" value="15"> outro Serviço</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>

eu gostaria de saber como incluir um desconto quando for selecionado.

2 Respostas 2

1

Primeiro eu aconselharia usar os valores de desconto em decimais, exemplo 5% = 0.05, 10% = 0.1, 15% = 0.15... etc...

const desconto = res.querySelector('[name="desconto"]');

desconto.addEventListener("change", () => {
    var total = serv.value;         // Pega o total
    total = total + total*desconto; // Calcula o Desconto
    total = total.toFixed(2);       // Coloca em formato de decimal com 2 casas
    campo.value = total;            // Preenche o campo que você quer preencher com o valor
})

Depois seria necessário colocar um campo pra exibir o valor final que está na variável total...

1

Tente fazer da seguinte forma

-

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const serv = res.querySelector('[name="serv"]');
const combo = document.getElementById("desconto");
inputs.forEach(x => x.addEventListener("change", () => {
    total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
    serv.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
	if (combo.value > 0){
		if (total.value > 0){
			total.value = total.value - (total.value * combo.value);
		}
	}
	
}));

combo.addEventListener("change", () => {
  if (total.value > 0){
    var desconto = (serv.value * combo.value);
	total.value = total.value - (total.value * combo.value);
  }
});
<div id="resultado" class="col">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text bg-primary text-white">Serviços</span>
        </div>
        <input type="text" class="input-group-text" placeholder="0,00" name="total" value="" readonly="readonly">
        <input type="hidden" name="serv" value="0">
    </div>
</div>
<div class="form-group">
    <label for="">Desconto: </label>
    <select class="form-control form-control-sm" name="desconto" id="desconto">
        <option value="0"></option>
        <option value="0.05">Desconto Pai e Filho</option>
        <option value="0.010">Amigo da Hora</option>
        <option value="0.015">Familia</option>
    </select>
</div>
<br>

<div class="row">
    <table class="table">
        <tbody>
            <tr>
                <td><input type=checkbox class='serv' name="" value="10"> Serviço</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type=checkbox class='serv' name="" value="15"> outro Serviço</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>

1
  • era exatamente essa situação, porém dessa forma não funciona precisamente... após selecionar um desconto quando seleciono outro, ele desconta no valor já descontado e não no valor real e também não consegui voltar ao valor real quando selecionei a opção em branco. 18/04/2019 às 3:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .