Jump to content
Fórum Script Brasil
  • 0

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


Question

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>

 

Edited by powerinformatica
Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 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 to post
Share on other 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 to post
Share on other 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 to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      149151
    • Total Posts
      645419
×
×
  • Create New...