May 06
Lista de Pedidos — Exemplo adicionar e remover elementos usando Javascript.
CSS, HTML, Javascript, PHP, Sites, Template Comentar >> Marcelo KorjenioskiNeste exemplo irei mostrar como criar elementos dentro do código html usando javascript e remover elemento estes elementos.
Criei uma lista de pedidos para exemplificar o uso destas funções.
Crie um arquivo html chamado pedidos.html e insira o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<script type="text/javascript">
// Remove elementos
function removeElement(id) {
// Declara variavel lista que indica onde o elemento será removido.
var lista = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);
// Função removeChild irá procurar elementos que estão dentro da variavel lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}
// Adiciona elementos basedo no valor dos combo box (select)
function adicionar(id) {
// Cria uma variavel que captura o valor do elemento selecionado no combo box.
var valor = document.getElementById(id).value;
// Cria uma variavel com referencia ao Id do Elemento
var lista = document.getElementById('lista');
// Cria uma variavel para inidicar a quantidade de elementos com o mesmo Id. Com valor inicial 1.
var qtd = 1;
// Verifica se elemento com o Id informado existe.
if(document.getElementById('element_' + valor)){
// Caso o elemento exista é atribuido o valor referente a quandide de vezes que foi adicionado
// este elemento.
qtd = document.getElementById('item_' + valor).value;
// Apos pegar o valor da quantidade. O elemento é removido para que não ocorra duplicação.
removeElement('element_' + valor);
// Incrementa a quantidade do elemento para o proximo registro.
qtd++;
}
// Variavel que contem dados dos novos elementos na lista.
// É criado uma tag <li> que contem informação do elemento adicionado.
// Dentro deste registro é adicionado um link <a> para remover o elemento.
// Tambem é adicionado um <input> do tipo hidden com o valor e a quantidade do elemento.
var dado = '<li id="element_' + valor + '"><span><strong>'
+ valor +
' Qtd '
+ qtd +
'</strong> <a title="Remover" onclick="removeElement(\'element_' + valor + '\'); return false;" href="javascript:void(0);">Remover</a></span><input id="item_'
+ valor +
'" type="hidden" value="'
+ qtd +
'" name="pedido['
+ valor +
']"/></li>';
// Pega o codigo HTML dento da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
}
</script>
<style type="text/css">
body {
background:#FFFFFF none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
height:100%;
line-height:1.3em;
margin:0;
width:100%;
}
div#wrapper {
margin:auto;
position:relative;
width:906px;
z-index:0;
}
input {
border:1px solid #CDCDCD;
background:#FFFFFF;
color:#000033;
}
input, select, textarea, label, button {
line-height:normal;
margin:2px 1px 1px 2px;
}
ul, li {
list-style: none;
}
li {
background:#FDFDFD;
color:#000033;
padding: 2px;
margin: 4px;
text-transform: uppercase;
}
legend {
color: #EB7800;
font-size:14px;
font-weight: bold;
}
</style>
<title>Lista de Pedidos</title>
</head>
<body>
<div id="wrapper">
<fieldset>
<legend>Cardápio</legend>
<label for="desc_bebidas">Bebidas</label>
<select id="desc_bebidas" name="desc_bebidas">
<option value="coca-cola">Coca-Cola</option>
<option value="fanta">Fanta</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_bebidas');"><br>
<label for="desc_pratos">Pratos</label>
<select id="desc_pratos" name="desc_pratos">
<option value="espaguete">Espaguete</option>
<option value="pizza">Pizza</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_pratos');"> <br>
<label for="desc_sobremesas">Sobremesas</label>
<select id="desc_sobremesas" name="desc_sobremesas">
<option value="pudim">Pudim</option>
<option value="sorvete">Sorvete</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_sobremesas');"><br>
</fieldset>
<!-- Envia dados via POST para pedidos.php -->
<form action="pedidos.php" method="post">
<fieldset>
<legend>Descrição</legend>
<textarea rows="3" cols="100" id="desc_observacao" name="desc_observacao"></textarea>
</fieldset>
<div id="pedidos">
<fieldset>
<legend>Pedidos</legend>
<div>
<!-- Lista onde será adicionado registros dos valores dos combo box selecionados -->
<ul id="lista"></ul>
</div>
</fieldset>
</div>
<input type="submit" value="Enviar Pedido">
</form>
</div>
</body>
</html>
Crie um arquivo php chamado pedidos.php e insira o código abaixo.
<?php // Organiza lista do array para o debug. echo "<pre>"; // Mostra Array de entrada de POST e GET print_r($_REQUEST); ?>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutorias aqui apresentados.
-
Eddie
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
http://www.fmt.to.gov.br Charles Jefferson
-
http://www.alanhidalgopagoto.com.br Alan Hidalgo Pagoto
-
http://www.phaneronsoft.com Marcelo Korjenioski
-
Profissional Ti
-
Lord_korjenioski
-
Profissional Ti
