jquery account does not work

Asked

Viewed 179 times

2

Hello, I am trying to assemble this code, however it is not working properly, if possible analyze because I did not find the errors...

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

<script>
function AtualizaMensalidade(tributacao, tipo_emp, fat_mes, qt_func, bcos_contas, LabelID)
    {
        tributacao = $('#tributacao').val();
        tipo_emp = $('#tipo_emp').val();
        fat_mes = $('#fat_mes').val();
        qt_func = $('#qt_func').val();
        bcos_contas = $('#bcos_contas').val();

        var MesCalc = (qt_func * 20) + tipo_emp + fat_mes + tributacao;

        if (isNaN(MesCalc)) {
            document.getElementById(LabelID).innerHTML = "- -";
        }
        else {
            document.getElementById(LabelID).innerHTML = formatDinheiro(MesCalc, "R$");
        }
    }

    function formatDinheiro(n, currency) {
        return currency + " " + n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
    }

</script>

<div class="container">
    <div class="col-md-4 alinha">
            <label>Tipo de atividade</label>
            <select id="tributacao" name="tributacao" class="form-control input" onchange="Mensalidade(this.value,'tributacao','tipo_emp','fat_mes','qt_func','bcos_contas','AtualizaMensalidade')" />>
            <option value="0">Escolha</option>
            <option value="49.90">MEI</option>
            <option value="219">Simples Nacional</option>
            <option value="319">Lucro Presumido</option>
            <option value="2500">Lucro Real</option>

        </select>
    </div>
    <div class="col-md-4 alinha">
            <label>Tipo de atividade</label>
            <select id="tipo_emp" name="tipo_emp" class="form-control input"  onchange="Mensalidade(this.value,'tributacao','tipo_emp','fat_mes','qt_func','bcos_contas','AtualizaMensalidade')">
            <option value="0">Escolha</option>
            <option value="30">Serviços</option>
            <option value="150">Industrial</option>
            <option value="80">Comercial</option>
            <option value="110">Serviços e Comercio</option>

            </select>   

    </div>
    <div class="col-md-4 alinha">
        faturamento mes<br>
        <input type="number" id="fat_mes" name="fat_mes" class="form-control input" onchange="Mensalidade(this.value,'tributacao','tipo_emp','fat_mes','qt_func','bcos_contas','AtualizaMensalidade')">
    </div>
</div><br>
<div class="container"> 
    <div class="col-md-4 alinha">
        <label>Numero de Funcionarios</label>
        <input type="number" id="qt_func" name="qt_func" class="form-control input" onchange="Mensalidade(this.value,'tributacao','tipo_emp','fat_mes','qt_func','bcos_contas','AtualizaMensalidade')">
    </div>      
    <div class="col-md-4 alinha">
        </label>Quantidade de contas</label>
        <input type="number" id="bcos_contas" name="bcos_contas" value="0" class="form-control input" onchange="Mensalidade(this.value,'tributacao','tipo_emp','fat_mes','qt_func','bcos_contas','AtualizaMensalidade')">
    </div>

<div class="alinha">Resultado: R$ <span id="AtualizaMensalidade">---</span></div>
</div>
jquery
  • 2

    It would be easier if you mentioned what is not working properly!

  • 2

    Welcome to Sopt! Read on How to ask and mcve to know how to elaborate a question of easy understanding and so can be helped. For example, what error are you having in your code, what is working?

  • 2

    Vinicius explain better to us, what you expected to happen and does not happen and what you have tried to do, if this code ai is yours or was already in production when you took the project... So we can help you better my friend. @Sergio has already published an answer that can solve your problem below.

  • the mistake I have is that the total value does not appear in the end, because I am new in this language... but I know that it is a simple account to do, but I am lost....

1 answer

3


When you have, for example

<select id="tributacao" name="tributac... etc
    <option value="219">Simples Nacional</option>

and fetch the value of the option selected with tributacao = $('#tributacao').val(); this will return a String and not a Number. It returns "219" instead of 219. You have to use parseInt or in this case as you have values with decimals parseFloat.

Not related to your problem, but a suggestion:

in your job you have: function AtualizaMensalidade(tributacao, tipo_emp, fat_mes, qt_func, bcos_contas, LabelID) { but it seems to me that you don’t need those arguments. Is it a way to avoid declaring variables? In that case, advise against it. It makes it difficult to read code. I would do so:

var label = document.getElementById('AtualizaMensalidade');
['tributacao', 'tipo_emp', 'fat_mes', 'qt_func', 'bcos_contas'].forEach(function(id) {
    var el = document.getElementById(id);
    el.addEventListener('change', Mensalidade)
});

function Mensalidade() {
    var qt_func = parseFloat(document.getElementById('qt_func').value);
    var MesCalc = (qt_func * 20) + ['tributacao', 'tipo_emp', 'fat_mes'].reduce(function(total, id) {
        var val = document.getElementById(id).value;
        return total + parseFloat(val);
    }, 0);
    label.innerHTML = isNaN(MesCalc) ? "- -" : formatDinheiro(MesCalc, "R$");
}

function formatDinheiro(n, currency) {
    return currency + " " + n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
}
<div class="container">
    <div class="col-md-4 alinha">
        <label>Tipo de atividade</label>
        <select id="tributacao" name="tributacao" class="form-control input">
            <option value="0">Escolha</option>
            <option value="49.90">MEI</option>
            <option value="219">Simples Nacional</option>
            <option value="319">Lucro Presumido</option>
            <option value="2500">Lucro Real</option>
        </select>
    </div>
    <div class="col-md-4 alinha">
        <label>Tipo de atividade</label>
        <select id="tipo_emp" name="tipo_emp" class="form-control input">
            <option value="0">Escolha</option>
            <option value="30">Serviços</option>
            <option value="150">Industrial</option>
            <option value="80">Comercial</option>
            <option value="110">Serviços e Comercio</option>

        </select>

    </div>
    <div class="col-md-4 alinha">
        faturamento mes
        <br>
        <input type="number" id="fat_mes" name="fat_mes" class="form-control input">
    </div>
</div>
<br>
<div class="container">
    <div class="col-md-4 alinha">
        <label>Numero de Funcionarios</label>
        <input type="number" id="qt_func" name="qt_func" class="form-control input">
    </div>
    <div class="col-md-4 alinha">
        <label>Quantidade de contas</label>
        <input type="number" id="bcos_contas" name="bcos_contas" value="0" class="form-control input">
    </div>

    <div class="alinha">Resultado: <span id="AtualizaMensalidade">---</span></div>
</div>

I don’t see in your function where you use bcos_contas = $('#bcos_contas').val();, so I took my example. `

  • the part of bcos_accounts had not yet applied, however the value does not appear below the result, I am new in jquery and catching much.

  • @Viniciusnakamura I will add a better version. 1 min.

  • @Viniciusnakamura looks again at the answer. Much simpler... without jQuery and simpler in HTML and Javascript.

  • Thank you very much, now I have to read more and deepen myself in this language.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.