HTML Formulário em site com função de soma

Gabriella Furlan · 7 de janeiro de 2019

Boa tarde!

Sou totalmente iniciante e estou querendo incluir um formulário em meu site, onde o cliente seleciona as opções e, ao clicar em "CALCULAR" aparece a mensagem com um valor final.

Esse valor final seria a soma do valor de cada opção selecionada no formulário.

Qual seria a forma mais simples de incluir esta função no meu código?

Consegui chegar apenas até aqui:

<div class="modal-body">
                    <div class="aligncenter">
                        <html>
                            <head>
                                <title><br>ORÇAMENTO</title>
                            </head>
                            <body bgcolor= "# 000000" text= "gold">
                                <form name="calculator" >
                                <select name="faturamento" >
                                    <option value="240">SEM MOVIMENTO</option>
                                    <option value="540">0,01 A 15.000,00</option>
                                    <option value="640">15.000,01 A 30.000,00</option>
                                    <option value="740">30.000,01 A 50.000,00</option>
                                    <option value="840">50.000,01  A 75.000,00</option>
                                    </select>
                                <select name="segmentação" >
                                    <option value="0">SERVIÇOS</option>    
                                    <option value="10">COMÉRCIO</option>
                                </select>
Valor da mensalidade
                                <input type="button" value="CALCULAR" onClick="document.calculator.resultado.value=calcular()">
                                    <br>Valor será <input type="textfield" name="resultado" value="">
                                </form>
                            </body>
                        </html>

navegantenarede · 7 de janeiro de 2019

@Gabriella Furlan você precisa criar a função com a lógica que fazer o cálculo que você quer.

Aqui eu fiz um exemplo que pode te ajudar no início, mas eu não sei como você quer calcular. E continuar a desenvolver a partir daí pode te ajudar a entender melhor do que pegar uma solução completamente pronta. Nesse caso, eu fiz com JavaScript, mas você pode fazer com outra linguagem de programação.

Uma sugestão para a estrutura do seu HTML é ficar atento às boas práticas.

Por exemplo:

- O elemento <div> deve ficar dentro do <html> e não o contrário.

- Há uma tag <br> dentro elemento <title>, o que não faz sentido para o navegador.

- Para estilizar elementos, utilize CSS, o atributo bgcolor não é mais suportado no HTML5.

- Use classes ou IDs para identificar os elementos que você pretende manipular.

- Evite usar caracteres especiais nos nomes das classes/ids dos elementos.

Algumas fontes com exemplos:

- https://developer.mozilla.org/pt-BR/

- https://www.w3schools.com/

Gabriella Furlan · 8 de janeiro de 2019

@navegantenarede Muito obrigada pelas dicas!!

Aquele código eu peguei pronto e fui modificando, como ainda não tenho muita noção não reparei nestas falhas! Agradeço a explicação

Sobre o código, eu quero que a pessoa selecione uma opção na lista "Faturamento" e uma opção na lista "Segmento"... Eu atribui um valor para cada opção em "Value" e preciso que seja somado esse valor e apareça em "Sua mensalidade é X".

Não sei se o que fiz até o momento ta certo.

No seu exemplo eu vi que você me passou uma fórmula "if",nesse caso eu precisaria criar um "If" para cada combinação?Assim?

If Faturamento == 240

and Segmentação == 10

Valor == 250.

É que eu estou criando essas duas variáveis primeiro, mas tenho mais outras 3 ou 4 para incluir e preciso que seja somado os valores em todas as combinações.

Mais uma vez obrigada pela ajuda!!

Desculpa qualquer besteira, estou me complicando um pouco ainda

navegantenarede · 8 de janeiro de 2019

@Gabriella Furlan nesse caso você pode fazer o cálculo direto sem o if, já que é somente uma soma dos valores dos selects.

Basta uma variável pro valor de faturamento e outra para o valor de segmentação, depois, fazer a soma dos valores nessas variáveis. Veja esse exemplo com o código atualizado.

Quando você for adicionar mais valores, basta criar novas variáveis e obter os valores da mesma forma, para acrescentar na soma do total.