formulario - Calculo de campo em tempo real.

Gostaria que na transição de preenchimento dos campos Num1, Num2 e Num3 o valor da media fosse calculado e apresentado no campo Media.

Por exemplo o usuário preencheu o valor de Num1 e clicou ou pressionou tab para preencher Num2 neste momento o valor da médio fosse calculado e apresentado no campo Media. O mesmo calculo ocorreria apos o preenchimento de Num3.

Tentei a seguinte abordagem apos retorno de Gabriel Franco porem o valor não é calculado automaticamente:

Código no Formulario.html:

<!DOCTYPE html>
<html>
<head>
<title>Form</title>

<link rel="stylesheet" type="text/css"
    href="/resources/style-guide/css/fluig-style-guide.min.css">
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/resources/js/mustache/mustache-min.js"></script>
<script src="/resources/style-guide/js/fluig-style-guide.min.js"></script>

<!-- CUSTOM -->
<link href="/resources/style-guide/css/fluig-style-guide-filter.min.css"
    rel="stylesheet" type="text/css">
<link
    href="/resources/style-guide/css/fluig-style-guide-ratingstars.min.css"
    rel="stylesheet" type="text/css">
<script src="/resources/style-guide/js/fluig-style-guide-filter.min.js"></script>
<script
    src="/resources/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>

<link
    href='/webdesk/customresources?cid=1&resourceName=temaFormulario/0.css'
    type='text/css' rel='stylesheet' />
</head>
<body class="fluig-style-guide">

    <form
        class="totvs-form grid vertical create-form-components ui-sortable t0"
        name="createFormComponents"
        style="padding-left: 10px; padding-right: 10px;">
        <h1 class="title-form-application">FormulÃ¡rio de Radio Teste 12</h1>
        <div class="form-field" data-type="textbox" data-show-properties=""
            data-field-name="Nome"
            style="position: relative; left: 0px; top: 0px;">


            <div class="form-input">
                <div class="form-group">
                    <label>Nome</label> <input type="text" class="form-control"
                        name="Nome" value="" placeholder="" data-size="big">
                </div>
            </div>
        </div>
        <div class="form-field" data-type="number" data-show-properties=""
            data-field-name="Num01">
            <div class="form-input">
                <div class="form-group">
                    <label>Num1</label> <input type="number" class="form-control" onblur="Myfunction()"
                        name="Num01" id="Num01" value="" placeholder="" data-size="big"
                        data-only-numbers="">
                </div>
            </div>
        </div>
        <div class="form-field" data-type="number" data-show-properties=""
            data-field-name="Num02">
            <div class="form-input">
                <div class="form-group">
                    <label>Num2</label> <input type="number" class="form-control" onblur="Myfunction()"
                        name="Num02" id="Num02" value="" placeholder="" data-size="big"
                        data-only-numbers="">
                </div>
            </div>
        </div>
        <div class="form-field" data-type="number" data-show-properties=""
            data-field-name="Num03">
            <div class="form-input">
                <div class="form-group">
                    <label>Num3</label> <input type="number" class="form-control" onblur="Myfunction()"
                        name="Num03" id="Num03" value="" placeholder="" data-size="big"
                        data-only-numbers="">
                </div>
            </div>
        </div>
        <div class="form-field" data-type="number" data-show-properties=""
            data-field-name="Media">
            <div class="form-input">
                <div class="form-group">
                    <label>Media</label> <input type="number" class="form-control"
                        name="Media" id="Media" value="" placeholder="" data-size="big"
                        data-only-numbers="">
                </div>
            </div>
        </div>
    </form>


    <script type="text/javascript">
        var keyDown = false, ctrl = 17, vKey = 86, Vkey = 118;

        $(document).keydown(function(e) {
            if (e.keyCode == ctrl)
                keyDown = true;
        }).keyup(function(e) {
            if (e.keyCode == ctrl)
                keyDown = false;
        });

        $('[data-only-numbers]').on('keypress', function(e) {
            if (!e) {
                var e = window.event;
            }

            if (e.keyCode > 0 && e.which == 0) {
                return true;
            }

            if (e.keyCode) {
                code = e.keyCode;
            } else if (e.which) {
                code = e.which;
            }

            if (code == 46) {
                return true;
            }

            var character = String.fromCharCode(code);
            if (character == '\b' || character == ' ' || character == '\t') {
                return true;
            }
            if (keyDown && (code == vKey || code == Vkey)) {
                return (character);
            } else {
                return (/[0-9]$/.test(character));
            }
        }).on('focusout', function(e) {
            var $this = $(this);
            if ($this.val() == "") {
                return true;
            }
            $this.val($this.val().replace(/[^0-9\.]/g, ''));
        }).on('paste', function(e) {
            var $this = $(this);
            setTimeout(function() {
                $this.val($this.val().replace(/[^0-9\.]/g, ''));
            }, 5);
        });

        $('.create-form-components')
                .on(
                        'keyup',
                        'input[required="required"][type="text"], input[required="required"][type="number"], input[required="required"][type="date"], textarea[required="required"]',
                        function() {
                            validationFieldsForm($(this), $(this).parents(
                                    '.form-field').data('type'));
                        });

        $('.create-form-components')
                .on(
                        'change',
                        'input[required="required"][type="checkbox"], input[required="required"][type="radio"], select[required="required"]',
                        function() {
                            validationFieldsForm($(this), $(this).parents(
                                    '.form-field').data('type'));
                        });

        function validationFieldsForm(field, type) {
            if (type === "checkbox" || type === "radio") {
                if (!field.is(':checked')) {
                    field.parents('.form-field').addClass('required');
                } else {
                    field.parents('.form-field').removeClass('required');
                }
            } else {
                if (!field.val().trim()) {
                    field.parents('.form-field').addClass('required');
                } else {
                    field.parents('.form-field').removeClass('required');
                }
            }
        }

        var $zoomPreview = $(".zoom-preview");
        if ($zoomPreview.length) {
            $zoomPreview.parent().removeClass("input-group");
            $zoomPreview.remove();
        }

        var ratings = $(".rating");
        if (ratings.length > 0)
            ratingStars(ratings);
        function ratingStars(stars) {
            $.each(stars, function(i, obj) {
                var field = $(this).closest(".form-group")
                        .find(".rating-value");
                var tgt = $(obj);
                tgt.html("");
                var rating = FLUIGC.stars(tgt, {
                    value : field.val()
                });
                rating.on("click", function(o) {
                    field.val($(this).index() + 1);
                });
            });
        }

        $.each($("[data-date]"), function(i, o) {
            var id = $(o).attr("id");
            FLUIGC.calendar("#" + id);
        });

        $(document).ready(function() {
            $.each($("[data-date]"), function(i, o) {
                var id = $(o).attr("id");
                if ($("#" + id).attr("readonly")) {
                    $("#" + id).data('DateTimePicker').disable();
                }
            });
            $("#Num01, #Num02, #Num03").on("blur", Myfunction() {
                $("#Media").val(calculaMedia());
            });
        });


        function calculaMedia() {
            var num1 = $("#Num01").val();
            var num2 = $("#Num02").val();
            var num3 = $("#Num03").val();

            if (num1 == '') {
                num1 = 0;
            }
            if (num2 == '') {
                num2 = 0;
            }
            if (num3 == '') {
                num2 = 0;
            }

            var media = ((num1 + num2 + num3) / 3);

            return media;
        }

    </script>
</body>
</html>

Gabriel obrigado pelo retorno a media não foi calculada automaticamente, publiquei o ".html". É preciso fazer alguma configuração para antes de usar onblur ou onchange no input?

— Percilio 10 de Aug de 2018

O código que te passei, do blur tem que colocar no ready, ficando assim:

$(document).ready(function() {
    $.each($("[data-date]"), function(i, o) {
        var id = $(o).attr("id");
        if ($("#" + id).attr("readonly")) {
            $("#" + id).data('DateTimePicker').disable();
        }
    });

    $("#Num01, #Num02, #Num03").on("blur", function() {
        $("#Media").val(calculaMedia());
    });
});

— Gabriel Franco da Rocha Nascimento 10 de Aug de 2018

No seu código está Myfunction, o correto é function

Gabriel continua não calculando atualizei o ".html" da pergunta.

Você tem que fazer o seguinte, trocar o Myfunction por function, assim está errado:

$("#Num01, #Num02, #Num03").on("blur", Myfunction() {
    $("#Media").val(calculaMedia());
});

O Correto é assim:

$("#Num01, #Num02, #Num03").on("blur", function() {
    $("#Media").val(calculaMedia());
});

Nos campos Num01, Num02 e Num03 você tem que tirar o onblur, está assim:

<label>Num1</label> <input type="number" class="form-control" onblur="Myfunction()"
    name="Num01" id="Num01" value="" placeholder="" data-size="big"
    data-only-numbers="">

Tem que ficar assim:

<label>Num1</label> <input type="number" class="form-control"
    name="Num01" id="Num01" value="" placeholder="" data-size="big"
    data-only-numbers="">

E a função calculaMedia, você pode alterar para essa:

        function calculaMedia() {
            var num1 = $("#Num01").val();
            var num2 = $("#Num02").val();
            var num3 = $("#Num03").val();

            num1 = (num1.trim() == '' ? 0 : num1);
            num2 = (num2.trim() == '' ? 0 : num2);
            num3 = (num3.trim() == '' ? 0 : num3);

            var media = ((Number(num1) + Number(num2) + Number(num3)) / 3);
            media = parseFloat(media).toFixed(2);

            return media;
        }

Dá pra melhorar o script e reduzir a quantidade de código. Deixei assim pra você ver se ajuda.

— Tiago Volpi 08 de Aug de 2018

Tiago obrigado pelo retorno, tentei uma abordagem baseada na sua resposta porem não obtive o resultado esperado. Editei a questão pois não consegui incluir código no comentário de uma forma organizada. Mais uma vez obrigado.

fluig forum

Calculo de campo em tempo real.

Comentário

2 respostas

Comentário

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags formulario evento eventos eventosformulario processo campo calculo ou faça a sua própria pergunta.