Result automatic calculation javascript Asp.net mvc

Question

I was able to sum two fields using Java Script, but the result only displayed by clicking on the result field, I would like to display the result automatically, without having to click on 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>

Answer 1

Make a separate function with this calculation code and place within the execution of the ready, to work at the exact time of page loading, follow the code 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();
    });

Answer 2

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

You can use the eventu keyup (when you release the key) to call the function and have the result immediately while typing.

In addition, you must 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);

}