DUVIDA:novo inptTextField sem precisar reinderizar novamente a páginia

10 de novembro de 2007 2 respostas

andmarques2006 10 de novembro de 2007

Olá pessoal …
Estou com o seguinte peoblema…
preciso clicar em um link, e a ação do link será gerar um novo inptTextField sem precisar reinderizar novamente a páginia…parecido com o link “anexar um arquivo” do gmail(ver img abaixo)

Ou seja, a cada vez que você clicar no link “anexar outro arquivo” aparece um novo inputextfield…
O problema é que não sei como fazer isso…acho importante citar que em meu projeto uso jsf e facelets…

caso alguem possa me ajudar( me indicando algum framework, que faça isso)…Obrigado…!!! 8)

2 Respostas

andreiribas 10 de nov. de 2007

o truque aí é que existe uma div escondida, que só fica visível quando você clica no link.
da pra fazer isso com javascript e DOM bem fácil…

por exempĺo:

<script>
   function mostrarDiv() {
      document.getElementById('divAnexarArquivo').style.display = '';
   }
</script>

<a href="#" onclick="mostrarDiv()">Anexar Arquivo</a>
<div id="divAnexarArquivo" style="display: none;"><input type="text" name="upload"/></div>

o basicão é isso, mas dá pra fazer muito mais coisas

cassio 10 de nov. de 2007

andreiribas:
o truque aí é que existe uma div escondida, que só fica visível quando você clica no link.
da pra fazer isso com javascript e DOM bem fácil…

por exempĺo:
<script>
   function mostrarDiv() {
      document.getElementById('divAnexarArquivo').style.display = '';
   }
</script>

<a href="#" onclick="mostrarDiv()">Anexar Arquivo</a>
<div id="divAnexarArquivo" style="display: none;"><input type="text" name="upload"/></div>
o basicão é isso, mas dá pra fazer muito mais coisas

Na verdade não é bem isso, porque se assim fosse haveria um limite na quantidade de arquivos que podem ser anexados (igual á quantidade de

escondidos.
O que eles fazem é criar um novo a cada vez que se clica no botão, mais ou menos como descrito abaixo:

var input = document.createElement('input');
document.getElementById('id_do_seu_div').appendChild(input);

Criado 10 de novembro de 2007

Ultima resposta 10 de nov. de 2007

Respostas 2

Participantes 3

2 Respostas

Topicos relacionados