Calculo de SubTotal e Total.

Gostaria que conforme os valores Numero 1,Numero 2 e Numero 3 fossem preenchidos o Sutotal seja calculado bem como o Total. Lembrando que caso algum valor for excluído os cálculos sejam refeitos.

SuTotal é a soma dos valores de Numero 1, Numero 2 e Numero 3 na linha correspondente e Total a soma de todos os Subtotais.

forlulario linha V02.png

<!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 19</h1>
        <div class="form-field" data-type="tabledetail"
            data-show-properties="" data-field-name="">


            <div class="form-input">
                <div class="form-group">
                    <label></label>
                    <table tablename="tabledetailname2" class="table"
                        noaddbutton="true">
                        <thead>
                            <tr class="tableHeadRow">
                                <th class="tableColumn">Numero 1</th>
                                <th class="tableColumn">Numero 2</th>
                                <th class="tableColumn">Numero 3</th>
                                <th class="tableColumn">SubTotal</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>

                                <td class="fs-v-align-middle">
                                    <div class="form-input">
                                        <input type="text" name="column2_2" class="form-control">
                                    </div>
                                </td>

                                <td class="fs-v-align-middle">
                                    <div class="form-input">
                                        <input type="text" name="column3_2" class="form-control">
                                    </div>
                                </td>

                                <td class="fs-v-align-middle">
                                    <div class="form-input">
                                        <input type="text" name="column4_2" class="form-control">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-primary"
                        onclick="wdkAddChild('tabledetailname2')">Novo Registro</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>Total</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
  • Você tem que somar no seu código JavaScrip. Se você postar seu código HTML posso te mostra como.

    Felipe Ribeiro Lorenzon   23 de Aug de 2018
  • Código Incluído.

    Percilio   23 de Aug de 2018
  • Percilio, você conseguiu resolver essa demanda?

    Brendo Santos   3 weeks ago
  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!

3 respostas

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