JackJeff's Content

There have been 2 items by JackJeff (Search limited from 17/04/2023)

Tipos

See this member's

Ordernar por

Order

#1038044 Formulário para calculo de produtos

Posted by JackJeff on 30/01/2017, 18:40 in Javascript / DOM / AJAX / ECMAScript

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>

#1023688 Formulário Dinâmico

Posted by JackJeff on 30/07/2016, 23:51 in Javascript / DOM / AJAX / ECMAScript

Boa noite a todos,

Gostaria de obter a ajuda de vocês com a relação a uma dúvida com a criação de um formulário dinâmico.
Não tenho experiência em Javascript e preciso colocar alguns campos dinâmicos em um formulário.

Neste formulário, existem os campos "Produto", "Medidas", "Quantidade" e "Acabamento".
Preciso colocar um botão "Adicionar Produtos" logo abaixo destes campos e quando esse botão for clicado, gostaria que outros campos "Produto", "Medidas", "Quantidade" e "Acabamento" fossem adicionados automaticamente.

Juntamente com o botão "Adicionar Produtos".
Junto com esses novos campos, deve haver o botão "Excluir" para que o cliente possa apagar os campos adicionais se assim desejar.

Se possível, preciso também do PHP para envio deste formulário.

Tenho um código que estou tentando ajustar para este fim, mas ele habilita apenas um campo e não todos os campos que preciso, mas como não tenho experiência, não estou conseguindo resolver.
desde já, agradeço a todos pela ajuda.

Segue o código HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Informe seus dados</h2>

</p>

<label for="footer-telefone">Telefone<span class="required">*</span></label>

</p>

</p>

<label for="footer-info">Endereço<span class="required">*</span></label>

</p>

<label for="footer-info">Complemento<span class="required">*</span></label>

</p>

</div>

<label for="footer-info">Bairro<span class="required">*</span></label>

</p>

</div>

<label for="footer-info">Cidade<span class="required">*</span></label>

</p>

</div>

<label for="footer-info">Produto<span class="required">*</span></label>

<option>Selecione</option>

</select>

</p>

</div>

<label for="footer-info">Medidas<span class="required">*</span></label>

</select>

</p>

</div>

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

</p>

</div>

<label for="footer-info">Acabamento<span class="required">*</span></label>

<option>Selecione</option>

</select>

</p>

</div>

<br>

<label for="footer-message">Informações</label>

</p>

<button type="submit" id="footer_contact_form_submit" name="contact_submit" class="theme_button color1">Enviar</button>

</p>

</form>

</div>

</div>

var qtdeCampos = 0;

function addCampos() {

var objPai = document.getElementById("campoPai");

//Criando o elemento DIV;

var objFilho = document.createElement("div");

//Definindo atributos ao objFilho:

objFilho.setAttribute("id","filho"+qtdeCampos);

//Inserindo o elemento no pai:

objPai.appendChild(objFilho);

//Escrevendo algo no filho recém-criado:

document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='campo"+qtdeCampos+"' name='campo[]'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Excluir'>";

qtdeCampos++;

}

function removerCampo(id) {

var objPai = document.getElementById("campoPai");

var objFilho = document.getElementById("filho"+id);

//Removendo o DIV com id específico do nó-pai:

var removido = objPai.removeChild(objFilho);

}

</script>

</body>

</html>