Result automatic calculation javascript asp.net mvc [duplicate]

Question

Result automatic calculation javascript asp.net mvc [duplicate]

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I was able to sum the two fields using Java Script, but the result only displayed when clicking the result field, I would like to display the result automatically, without having to click anything.

Javascript

<script type="text/javascript">
    $(document).ready(function () 
    {
        $('#acontratar, #ch').blur(function () 
        {
            var acontratar = $('#acontratar').val();
            var ch = $('#ch').val();

            if (acontratar == "") acontratar = 0;
            if (ch == "") ch = 0;

            var resultado = parseInt(acontratar) * parseInt(ch);
            $('#total').val(resultado);
        });
    });

View

<div class="ibox-content">
    <div class="form-group">
        @Html.LabelFor(model => model.Nr_AContratar, new { @class = "control-label col-md-2" })
        <div class="col-md-2">
            @Html.TextBoxFor(model => model.Nr_AContratar, new { @class = "form-control col-md-1", @id = "acontratar" })
            @Html.ValidationMessageFor(model => model.Nr_AContratar)
        </div>
        @Html.LabelFor(model => model.Nr_CargaHorariaContratar, "Carga Horaria Semanal", new { @class = "control-label col-md-2" })
        <div class="col-md-2">
            @Html.DropDownListFor(model => model.Nr_CargaHorariaContratar, new SelectList(string.Empty),
             "---", new { style = "width: 50px;",  @id = "ch" })


            @Html.ValidationMessageFor(model => model.Nr_CargaHorariaContratar)
        </div>

        @Html.LabelFor(model => model.Nr_TotalPlano, new { @class = "control-label col-md-2" })
        <div class="col-md-2">
            @Html.TextBoxFor(model => model.Nr_TotalPlano, new { @class = "form-control col-md-2", @id = "total" })
            @Html.ValidationMessageFor(model => model.Nr_TotalPlano)
        </div>
    </div>
</div>

javascript asp.net-mvc

asked by anonymous 26.09.2016 / 15:18

2 answers

How to list the records of a certain employee with Laravel? Button show div 1 and hide div 2 and vise versa

score 2 · Answer 1

Do a separate function with this calculation code and place it within the ready execution, so that it works at the exact moment the page loads, as shown below:

<script type="text/javascript">

    function calcular()
    {
        var acontratar = $('#acontratar').val();
        var ch = $('#ch').val();

        if (acontratar == "") acontratar = 0;
        if (ch == "") ch = 0;

        var resultado = parseInt(acontratar) * parseInt(ch);
        $('#total').val(resultado);
    }

    $(document).ready(function () 
    {
        $('#acontratar, #ch').blur(function () 
        {
            calcular();
        });
        calcular();
    });

score 2 · Answer 2

You are using the blur event (when it loses focus) to call your function.

You can use the event keyup (when you release the key) to call the function and have the result immediately as you type.

In addition, you should create a function to call the calculation immediately.

$(document).ready(function () {

   calcular(); // calcula imediatamente ao carregar a página
   $('#acontratar, #ch')
         .blur(function(){calcular();}) // calcula ao perder o foco
         .keyup(function(){calcular();}); // calcula ao soltar a tecla


});

function calcular(){

        var acontratar = $('#acontratar').val();
        var ch = $('#ch').val();

        if (acontratar == "") acontratar = 0;
        if (ch == "") ch = 0;

        var resultado = parseInt(acontratar) * parseInt(ch);
        $('#total').val(resultado);

}