Versão atual:

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>

Versões (4):

Ver a versão formatada

Calculo de campo em tempo real.

Comentário

new question