Ir ao conteúdo
  • Cadastre-se
Xandrules

Javascript RESOLVIDO mostrar formulario ao clicar no botao

Posts recomendados

Boa Tarde, preciso mostrar um formulário quando clicar no botão.

Hoje para mostrar o formulário tenho que clicar duas vezes.

segue o meu código.

 

<input id="show-dateTime" type="button" value="Date/Time Config." onclick="showTime();" />
function showTime() {

	if (document.getElementById("setDateTimeConfig").style.visibility == "hidden") {
		document.getElementById("setDateTimeConfig").style.visibility = "visible";
		document.getElementById("setDateTimeConfig").style.display = '';

	} else {

		document.getElementById("setDateTimeConfig").style.display = 'none';
		document.getElementById("setDateTimeConfig").style.visibility = "hidden";
	}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules Por que não usa o jQuery toggle?   Para mostrar e esconder com apenas um clique e um botão.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF obrigado pela sugestão mais o meu problema é que não tenho muito recurso disponível, pois essa interface Web e de um sistema embarcado e eu tenho disponível apenas 1 MB para toda aplicação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules sem problemas, o plugin jQuery pode ser carregado via CDN, sem a necessidade de incluir nos arquivos do seu projeto.

 

Cole essa linha dentro do Header ou no final da página:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

<input id="show-dateTime" type="button" value="Date/Time Config." onclick="showTime();" />
<div class="form">
    <form>
         <input type="text" name="algo" placeholder="alguma coisa"/> 
          <input type="text" name="algo" placeholder="alguma coisa"/> 
           <input type="text" name="algo" placeholder="alguma coisa"/> 
            <input type="text" name="algo" placeholder="alguma coisa"/> 
            <input  type="button" value="Salvar"/>
            
    </form>
</div>
$("#show-dateTime").on("click", function(){
     $(".form").toggle();
});

Veja funcionando: https://jsfiddle.net/dife/p8ngzk05/2/

 

Simples não?  Não se açoite usando o JS puro...  vai fazer uma volta maior para uma coisa relativamente simples.

Jquery não pesa nada.  Não vejo porque não usar, já que facilita muito

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF não posso carregar via CDN pois esse sistema embarcado quase sempre e acessado via local.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules Ok, então baixe o arquivo jquery.min   que é extremamente pequeno. Não vai ocupar quase nada. apenas 84,8 KB dos seus 1024Kb disponíveis

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF olha deu certo em partes, porém quando eu dou apply, na segunda vez que abro ja não mostra meu formulário.

a area que antes era ocupada pelo meu form fica vazio.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules considerando que você tem pouco recurso disponível, uma forma sem JavaScript seria usando os elements details e summary. Então bastaria estilizar o botão com CSS.

 

Exemplo aqui

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@navegantenarede vou realizar teste com seu exemplo e venho dar meu feedback.

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules Eu faria igual o @navegantenarede falou. Cria uma classe css que esconde o botão e faz assim

 

div = document.querySelector('mydiv')

div.addEventListener('click', () => {
	div.classList.toggle('minha__classe__css')
})

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@makotsunami @DiF @navegantenarede fiz o seguinte.

<input id="write-button" type="button" value="Date/Time Config." />
<script>
    $(document).ready(function(){
        $("#write-button").click(function(){         
        $("#setDateTimeConfig").toggle();        
      });
    });

</script>

Com o pouco recurso que tinha disponível consegui fazer usando JQuery, eu já usava no código VueJS para criar um servidor de páginas e vi que ja tenho o JQuery no código para usar o NotifyJS então Simplesmente adicionei o código e funcionou.

 

Agradeço o tempo de cada um de vcs em me ajudar muito Obrigado.

 

  • Curtir 1
  • Triste 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Xandrules Só uma nota sobre o click:

 

Citação

 ".click se aplica ao DOM corrente, enquanto o .on (usando delegação) continuará valendo para novos elementos adicionados ao DOM depois da associação do evento."

Sabendo disso, eu aplicaria o on() para futuros eventos no DOM.

  • Curtir 2

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

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

ebook grátis "Aprenda a ler resistores e capacitores", de Gabriel Torres

GRÁTIS! BAIXE AGORA MESMO!