formulario Formulário dinâmico com Javascript

mauzwd · Janeiro 30, 2017

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>

<title>Teste</title>

<!--[if lt IE 9]>

<![endif]-->

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</script> -->

// 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>

<br>

<label for="footer-produtos">Escolha seus produtos<span class="required">*</span></label>

<option>Escolha</option>

</select>

</p>

</div>

<label for="footer-quantidade">Quantidade<span class="required">*</span></label>

<option>Escolha</option>

</select>

</p>

</div>

<label for="footer-quantidade">Opcional</span></label>

<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>

<label for="footer-valor">Valor</label>

</p>

</div>

</div>

</div>

<label for="footer-valor">Taxa de entrega</label>

</p>

</div>

<label for="footer-valor">Valor total</label>

</p>

</div>

<label for="footer-valor">Valor total</label>

</div>

</p>

</div>

<button type="submit" class="btn btn-danger pull-right" onclick="contact_send();">Enviar Pedido</button>

</div>

</form>

</div>

</body>

</html>

lowys · Janeiro 31, 2017

Pesquisei no google aqui, tipo esse??
https://css-tricks.com/examples/EditableInvoice/

mauzwd · Janeiro 31, 2017

Boa tarde Iowys,

É mais ou menos, nesse exemplo que você postou os valores também são editáveis e no meu caso os valores serão pré estabelecidos, ou seja, cada item já terá seu valor unitário e não poderá ser mudado.
O cliente somente escolherá a quantidade de itens, os tipos e se deseja opcionais ou não, aí o cálculo é feito automaticamente.
Sei que pode ser feito em javascript mas não domino a linguagem.
Obrigado por ajudar!

Entrar

formulario Formulário dinâmico com Javascript

Pergunta

mauzwd

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

mauzwd

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades