Calculo de media apos mudança de foco

Preciso que a medida que o foco passe para outro campo "Numero" a media fosse calculada.

FormularioV01.png

Formulario.html abaixo:

<!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 Teste 15</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="tabledetail"
            data-show-properties="" data-field-name="Valores">
            <div class="form-input">
                <div class="form-group">
                    <label>Valores</label>
                    <table tablename="tabledetailname2" class="table"
                        noaddbutton="true">
                        <thead>
                            <tr class="tableHeadRow">
                                <th class="tableColumn">Numero</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="tableBodyRow">
                                <td class="fs-v-align-middle"><div class="form-input">
                                        <input type="text" name="column1_2" class="form-control">
                                    </div></td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-primary"
                        onclick="wdkAddChild('tabledetailname2')">Novo Numero</button>
                </div>
            </div>
        </div>
        <div class="form-field" data-type="number" data-show-properties=""
            data-field-name="number1">
            <div class="form-input">
                <div class="form-group">
                    <label>Media</label><input type="number" class="form-control"
                        name="number1" 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();
                }
            });
        });
    </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!

1 resposta

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