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.

formulario.png

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>
compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

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.