Ir ao conteúdo
  • Cadastre-se
Rafael Abreu Miranda

HTML Como esconder e mostrar campos de arquivo no html?

Recommended Posts

Pessoal estou com o seguinte código

 

 

include ('verifica.php');
    echo("<form method='post' action='/sema/index.php/up' enctype='multipart/form-data'>");
    echo("<table>");
    echo("<th>Arquivo - ".$tipo."</th>");
    echo("<tr><td>");
    echo("<input type='hidden' name='tipo' id='tipo' value='".$tipo."'/>");
    echo("<input type='hidden' name='id' id='id' value='".$id."'/>");
    echo("<input type='hidden' name='num' id='num' value='".$registro[num]."'/>");
    echo("</td></tr>");
    echo("<tr><td width='69'>Processo:</td><td><input type='int' name='protocolo' id='prot' value ='".$registro[num]."Of20".$ano."'size=8/></td></tr>");
    echo("<tr><td>CPF:</td><td><input type='int' name='cpf' id='cpf'/></td></tr>");
    echo("<tr><td><input type='date' name='data' id='data'/></td></tr>");
    

    echo("<tr><td><input type='text' name='A1' id='A1'/><input type='file' name='arquivo'/></td></tr>");
        //como esconder isso na pagina e mostrar quando eu apertar um botão????
    echo("<tr><td><input type='text' name='A2' id='A2'/><input type='file' name='arquivo2'/></td></tr>");
    echo("<tr><td><input type='text' name='A3' id='A3'/><input type='file' name='arquivo3'/></td></tr>");
    echo("<tr><td><input type='text' name='A4' id='A4'/><input type='file' name='arquivo4'/></td></tr>");
    echo("<tr><td><input type='text' name='A5' id='A5'/><input type='file' name='arquivo5'/></td></tr>");
    echo("<tr><td><input type='text' name='A6' id='A6'/><input type='file' name='arquivo6'/></td></tr>");
    echo("<tr><td><input type='text' name='A7' id='A7'/><input type='file' name='arquivo7'/></td></tr>");
    echo("<tr><td><input type='text' name='A8' id='A8'/><input type='file' name='arquivo8'/></td></tr>");
    echo("<tr><td><input type='text' name='A9' id='A9'/><input type='file' name='arquivo9'/></td></tr>");
    echo("<tr><td><input type='text' name='A10' id='A10'/><input type='file' name='arquivo10'/></td></tr>");
    echo("<tr><td><input type='text' name='A11' id='A11'/><input type='file' name='arquivo11'/></td></tr>");
    echo("<tr><td><input type='text' name='A12' id='A12'/><input type='file' name='arquivo12'/></td></tr>");
    echo("<tr><td><input type='text' name='A13' id='A13'/><input type='file' name='arquivo13'/></td></tr>");
    echo("<tr><td><input type='text' name='A14' id='A14'/><input type='file' name='arquivo14'/></td></tr>");
    echo("<tr><td><input type='text' name='A15' id='A15'/><input type='file' name='arquivo15'/></td></tr>");
    echo("<tr><td><input type='text' name='A16' id='A16'/><input type='file' name='arquivo16'/></td></tr>");
    echo("<tr><td><input type='text' name='A17' id='A17'/><input type='file' name='arquivo17'/></td></tr>");
    echo("<tr><td><input type='text' name='A18' id='A18'/><input type='file' name='arquivo18'/></td></tr>");
    echo("<tr><td><input type='text' name='A19' id='A19'/><input type='file' name='arquivo19'/></td></tr>");
    echo("<tr><td><input type='text' name='A20' id='A20'/><input type='file' name='arquivo20'/></td></tr>");
    
    echo("<tr><td><input type='submit' value='Enviar' /></td></tr>");
    echo("</table>");
    echo("</form>");

 

 

mas eu não quero mostrar esses 20 campos de inserir arquivos ocupando espaço na pagina, queria deixar eles escondidos e ir adicionando só quando fosse necessário.
exemplo: alguém vai adicionar um arquivo, ai ele adiciona lá no primeiro que fica visível, mas supondo que ele precise colocar 4 anexos, ai ele iria clicar 4 vezes no botão "mais arquivo" e então iria aparecer mais 4 campos para por arquivo.

teria alguma forma de fazer isso?

passei a manhã toda olhando isso e tentando vários exemplos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Rafael Abreu Miranda Tem, mas você precisa manipular com Javascript.

Basicamente, você vai "criar" o elemento a medida que o usuário precisar.

 

Aqui neste link tem um exemplo de como criar dinamicamente os elementos com javascript.

 

Ou você simplesmente pode esconder via CSS...  e com javascript  fazer um evento de clicar para mostrar ou esconder o resto..

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 minutos atrás, DiF disse:

@Rafael Abreu Miranda Tem, mas você precisa manipular com Javascript.

Basicamente, você vai "criar" o elemento a medida que o usuário precisar.

 

Aqui neste link tem um exemplo de como criar dinamicamente os elementos com javascript.

 

Ou você simplesmente pode esconder via CSS...  e com javascript  fazer um evento de clicar para mostrar ou esconder o resto..

 

 

qual link?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Rafael Abreu Miranda Eita, falha minha,  separei o link e não postei...

 

Pesquisa Google sobre criação de campos input file  dinâmicos

Compartilhar este post


Link para o post
Compartilhar em outros sites

É melhor escrever essa página toda em HTML e colocar os <?php> quando for necessário. Em relação a esconder elementos, é só manipular com javascript e css, marcando o trecho que quer esconder com id, por exemplo:

<table id='esconde' style='display: none'>

</table>

 

E no botão chama uma função javascript:

<button onclick='aparece();'=></button>

 

Inserindo a função no fim do código:

<script>

     aparece(){

          document.getElementById('esconde').style.display = block;

     }

</script>

 

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

×