Jump to content


Photo

Formulário para calculo de produtos

javascript calculo produtos formulario

  • Faça o login para participar
Nenhuma resposta neste tópico

#1 JackJeff

JackJeff

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Masculino
  • Localidade:São paulo

Posted 30/01/2017, 18:40

Boa noite a todos,

Sou novo no fórum e iniciante em scripts e gostaria de uma ajuda para fazer um formulário de pedidos funcionar com cálculo dos itens escolhidos pelo cliente.
Os itens tem valor pré estabelecido e preciso do seguinte:
- Quando o cliente escolher a quantidade, essa quantidade deverá ser multiplicada pelo valor unitário pré estabelecido.
- Se o cliente escolher um opcional também com valor pré estabelecido, esse opcional seja acrescido no valor do item.
- Sempre deverá ser acrescido ao valor final, uma taxa de entrega também com valor pré estabelecido.
- Haverá campos que mostrará os valores totais por itens e outro campo que mostram o valor total da compra.
- Existe um botão "Adicionar Campos" e " Excluir Campos" e o valor final da compra deve respeitar a soma de todos os campos adicionados.
Caso o cliente exclua o campo, o valor total será também atualizado conforme a quantidade de itens.
-  Preciso que o formulário efetue o cálculo automaticamente, sem que seja necessário um botão "Calcular".

*Todos os campos devem ser obrigatórios.

Abaixo envio o formulário que tenho, onde preciso que essas funções sejam colocadas.
Desde já, agradeço a atenção e a ajuda de todos.
Muito obrigado. 

 

 

 
<!DOCTYPE html>
<html lang="pt-br">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teste</title>
    <!-- CSS START -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- CSS END -->
    <!--[if lt IE 9]>
<![endif]-->
    <!-- CLONA CAMPOS -->
    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script> -->
    <script type="text/javascript">
    // if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='assets/js/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>
    <script type="text/javascript" src="assets/js/clone-form-td.js"></script>
    <!-- FIM CLONA CAMPOS -->
    <div class="container">
          <form class="contact-form" method="post" action="">
        <br>
        <div id="entry1" class="clonedInput"><!-- DIV CLONA CAMPOS -->
              <div class="col-sm-4">
            <p class="contact-form-email">
                  <label for="footer-produtos">Escolha seus produtos<span class="required">*</span></label>
                  <select name="Selecione" class="form-control">
                <option>Escolha</option>
                <option>Item 1 - R$ 18,50</option>
                <option>Item 2 - R$ 18,50</option>
                <option>Item 3 - R$ 20,00</option>
                <option>Item 4 - R$ 20,00</option>
                <option>Item 5 - R$ 25,00</option>
                <option>Item 6 - R$ 25,00</option>
                <option>Item 7 - R$ 18,50</option>
                <option>Item 8 - R$ 18,50</option>
                <option>Item 9 - R$ 18,50</option>
                <option>Item 10 - R$ 18,50</option>
                <option>Item 11 - R$ 18,50</option>
                <option>Item 12 - R$ 18,50</option>
                <option>Item 13 - R$ 18,50</option>
                <option>Item 14 - R$ 18,50</option>
                <option>Item 15 - R$ 18,50</option>
                <option>Item 16 - R$ 18,50</option>
                <option>Item 17 - R$ 18,50</option>
                <option>Item 18 - R$ 18,50</option>
                <option>Item 19 - R$ 18,50</option>
                <option>Item 20 - R$ 18,50</option>   
                <option>Item 21 - R$ 18,50</option>
                <option>Item 22 - R$ 18,50</option>
                <option>Item 23 - R$ 18,50</option>
                <option>Item 24 - R$ 18,50</option>
                <option>Item 25 - R$ 18,50</option>                  
                <option>Item 26 - R$ 18,50</option>
                <option>Item 27 - R$ 18,50</option>                
                <option>Item 28 - R$ 18,50</option>                
                <option>Item 29 - R$ 18,50</option>                                           
              </select>
                </p>
          </div>
              <div class="col-sm-2">
            <p class="contact-form-email">
                  <label for="footer-quantidade">Quantidade<span class="required">*</span></label>
                  <select name="Selecione" class="form-control">
                <option>Escolha</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option> 
                <option>12</option>                               
                <option>13</option>
                <option>14</option>  
                <option>15</option>                                              
              </select>
                </p>
          </div>
              <div class="col-sm-4">
            <p class="contact-form-email">
                  <label for="footer-quantidade">Opcional</span></label>
                  <select name="Selecione" class="form-control">
                <option>Escolha</option>
                <option>Sem opcional</option>
                <option>Opcional 1 - R$ 6,50</option>
                <option>Opcional 2 - R$ 6,50</option>
                <option>Opcional 3 - R$ 6,50</option>
                <option>Opcional 4 - R$ 6,50</option>    
                <option>Opcional 5 - R$ 6,50</option>  
                <option>Opcional 6 - R$ 6,50</option>
                <option>Opcional 7 - R$ 6,50</option>
                <option>Opcional 8 - R$ 6,50</option>
              </select>
                </p>
          </div>          
              <div class="col-sm-2">
            <p class="contact-form-email">
                  <label for="footer-valor">Valor</label>
                  <input type="valor" aria-required="true" size="30" value="" name="valor" id="footer-valor" class="form-control" placeholder="VALOR">
                </p>
          </div>
            </div>
        <!-- FECHA DIV CLONA CAMPOS --> 
        <!-- ADICIONA CAMPOS -->
        <div id="addDelButtons" class="col-sm-4">
              <label for="footer-valor">&nbsp;</label>
              <input type="button" id="btnAdd" value="Adicionar + itens" class="form-control">
            </div>
        <div id="addDelButtons" class="col-sm-4">
              <label for="footer-valor">&nbsp;</label>
              <input type="button" id="btnDel" value="Excluir" class="form-control">
            </div>
        <div class="col-sm-2">
              <p class="contact-form-email">
            <label for="footer-valor">Taxa de entrega</label>
            <input type="total" aria-required="true" size="30" value="" name="total" id="footer-total" class="form-control" placeholder="R$ 4,00">
          </p>
            </div>
        <!-- FIM ADICIONA CAMPOS -->
        <div class="col-sm-2">
              <p class="contact-form-email">
            <label for="footer-valor">Valor total</label>
            <input type="total" aria-required="true" size="30" value="" name="total" id="footer-total" class="form-control" placeholder="VALOR TOTAL">
          </p>
            </div>
        <div class="col-sm-12">
              <label for="footer-valor">Valor total</label>
            </div>
        <div class="col-sm-4">
              <p class="contact-form-email">
            <input type="total" aria-required="true" size="30" value="" name="total" id="footer-total" class="form-control" placeholder="REPETE VALOR TOTAL">
          </p>
            </div>
        <div class="col-sm-8">
              <button type="submit" class="btn btn-danger pull-right" onclick="contact_send();">Enviar Pedido</button>
            </div>
      </form>
        </div>
    <!-- FIM DO FORM DE COMPRA --> 
    <!-- INÍCIO INFORMAÇÕES -->
<!-- FOOTER BOTTOM END --> 
<!-- JAVASCRIPT START --> 
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/ruxen.js"></script> 
<!-- JAVASCRIPT END -->
</body>
</html>






Veja alguns posts relacionados com: javascript, calculo, produtos, formulario

1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq