Ir ao conteúdo
  • Cadastre-se
Ana Grossi

Javascript Adicionar uma lista ao clicar no botão "+" .jsp

Recommended Posts

Olá! Estou tentando fazer um cadastro que funcionaria da seguinte forma:

  • Vou fazer a página de cadastro de uma determinada função;
  • Dentro desse cadastro, quero colocar um botão de "+" para que o usuário possa adicionar EPIs relacionados à função;
  • Esses EPIs já estão cadastrados no sistema, daí a ideia era que aparecesse uma lista dos EPIs cadastrados e o usuário selecionasse o que ele quiser;
  • Quando ele clicasse no "+" apareceria uma outra lista, e etc;

 

É JavaWeb, então é página em .jsp.

 

O código que tenho é para adicionar um campo de texto simples, sem ser do tipo "select". 

 

<script type="text/javascript">
                var qtdeCampos = 0;

                function addCampos() {
                var objPai = document.getElementById("campoPai");
                //Criando o elemento DIV;
                var objFilho = document.createElement("div");
                //var objData = document.createElement("div");
                //Definindo atributos ao objFilho:
                objFilho.setAttribute("id","epi"+qtdeCampos);
                //objData.setAttribute("id","data"+qtdeCampos);
                //Inserindo o elemento no pai:
                objPai.appendChild(objFilho);
                //objPai.appendChild(objData);
                //Escrevendo algo no filho recém-criado:
                document.getElementById("epi"+qtdeCampos).innerHTML = "<input type='text' id='epi"+qtdeCampos+"' name='epi[]' value='EPI: "+qtdeCampos+"'><input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar EPI'>";
                
                //document.getElementById("data"+qtdeCampos).innerHTML = "<input type='text' id='data"+qtdeCampos+"' name='data[]' value='Data de Recebimento: "+qtdeCampos+"'> \n\\n\
                
                qtdeCampos++;
                }

                function removerCampo(id) {
                var objPai = document.getElementById("campoPai");
                var objFilho = document.getElementById("epi"+id);

                //Removendo o DIV com id específico do nó-pai:
                var removido = objPai.removeChild(objFilho);
                }
                </script>

No formulário fica assim:

<div> 
      <label for="epiFunc">EPIs: </label>
      <div id="campoPai"></div>
      <input type="button" value="Adicionar EPIs" onclick="addCampos()">
</div> 

 

Aí não estou conseguindo transformar esse "text" em um select. 

Espero que alguém possa me ajudar! 
Obrigada !! 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×