Ir para conteúdo
Fórum Script Brasil
  • 0

Preciso fazer uma condicional para quando o usuário clica no checkbox, apareça o botão


powerinformatica

Pergunta

Boa tarde mestres! Preciso que quando o usuário clica no checkbox, automaticamente apareça o botão de assinar.

Atualmente, estou utilizando este código, más não está dando certo. Se alguém puder me ajudar, agradeço!

<form action="#">
  <div>
    <input type="checkbox" id = "semestral" nome = "subscribe" value = "semestral">
    <label for="semestral"> Você concorda com todas as informações desta página? </ label>
  </ div>

<?php 
if(isset($_POST['semestral']))
{ ?>
<div>
<button type="submit"> ASSINAR</ button>
</ div>
<?php
}
?>
</ form>

 

Editado por powerinformatica
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0

Eu recomendaria usar o Javascript para fazer essa ação em tempo real.

Primeiro defini um css que "esconda" o botão e adicionei a classe ao botão:

.btHidden{
  display: none;
}
<div>
	<button type="submit" class="btHidden">ASSINAR</ button>
</ div>

Agora que o botão não esta aparecendo eu criei um javascript que vai tirar ou colocar a classe:

<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

Olha se consegue adaptar no seu projeto.

Link para o comentário
Compartilhar em outros sites

  • 0
8 horas atrás, Alyson Ronnan Martins disse:

Eu recomendaria usar o Javascript para fazer essa ação em tempo real.

Primeiro defini um css que "esconda" o botão e adicionei a classe ao botão:


.btHidden{
  display: none;
}

<div>
	<button type="submit" class="btHidden">ASSINAR</ button>
</ div>

Agora que o botão não esta aparecendo eu criei um javascript que vai tirar ou colocar a classe:


<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

Olha se consegue adaptar no seu projeto.

Bom dia amigo... primeiramente gratidão total por ter me ajudado.... então, fiz este código que você me passou, e funcionou quase perfeitamente... na real, ele está funcionando só que ao contrário.. 

Quando NÃO está clicado, ele aparece o botão, porém quando clica DESAPARECE.... isso já é quase tudo o que eu queria...

Vou te mostrar o código como eu deixei. Certamente é alguma "caca" que eu fiz e não estou sabendo desfazer:

<style type="text/css">
.btHidden{
  display: none;
}

</style>

<form action="#">
  <div>
    <input type="checkbox" id="semestral" nome="semestral" value = "semestral" >
    <label for="semestral"> Você concorda com todas as informações desta página? </ label>
  </div>
  <div>
	<button type="submit">ASSINAR</button>
</div>

  
<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

</ form>

 

Link para o comentário
Compartilhar em outros sites

  • 0
18 minutos atrás, Alyson Ronnan Martins disse:

Bom dia @powerinformatica

Faltou colocar a classe css no botão para que ele fique oculto na hora que a pagina carregar.


	<button type="submit" class="btHidden">ASSINAR</button>
</div>

Isso vai fazer esconder o botão quando a pagina carregar e se marcar a checkbox vai mostrar 

Funcionooou... gratidão por tudo!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...