Change button class after filling in all fields

Question

Change button class after filling in all fields

Navigation

#1 by (0 votes)

0

I have a button that needs to be enabled when the user finishes filling the fields, however he needs to change the class when it is enabled ...

When the button is disabled I would need that as long as the fields are not filled the button stays in satus disabled and with the gray css class, after being filled in the fields the button is enabled and with the green css class, this would be in jQuery? How do I get started?

.btn-pdf {
  text-align: center;
  float: right;
  margin: 0 5px;
}

.btn-pdf .fa-thumbs-down {
  background-color: #f3f3f3;
  color: #787878;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-down:hover {
  background-color: #fbfbfb;
  transition: 0.2s;
}

.btn-pdf .fa-thumbs-up {
  background-color: #59bd59;
  color: #FFFFFF;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-up:hover {
  background-color: #68cb68;
  transition: 0.2s;
}

.btn-pdf a {
  text-align: center;
  font-family: 'KG Blank Space Solid';
  color: #303030;
  font-size: 13px;
}

.btn-pdf a:hover {
  text-decoration: none;
}

<form id="msform" method="post">

<div class="form-group">
  <label>Telefone Válido*</label>
  <input id="celular" type="text" class="form-control" name="celular" placeholder="Telefone">
</div>

<div class="form-group">
  <label>Selecione uma Opção</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name= "PMA" value="200">Shopping 1</option>
    <option name = "BRB" value="200">Shopping 2</option>
  </select>
</div>

</form>

<div class="btn-pdf">
   <a href="">
      <i class="far fa-thumbs-down fa-2x"></i><br>Baixar PDF
   </a>
 </div>
 
<div class="btn-pdf">
  <a href="">
      <i class="far fa-thumbs-up fa-2x"></i><br>Baixar PDF
  </a>
</div>

javascript html jquery

asked by anonymous 30.05.2018 / 15:46

1 answer

Ionic error connection to bank Phppgamdin Insert text from textboxes and read only after |

score 0 · Accepted Answer

I did not get it right if it was to have 2 buttons or one and swap. Well I think it's the second option, so I made a code here that should show you how field checking works.

$(function(){
	// Definimos um evento para os campos, quando alterarem ele deve verificar cada campo.
	$("#msform").find("input,textarea,select").on("change paste keyup",verificarCampos);
  
  function verificarCampos(){
  	var falha=false;
    $("#msform").find("input,textarea,select").each(function(){
    	// Se o valor for vazio, define que houve falha:
    	if($(this).val()=="" || $(this).val()==null) falha=true;
    });
    // Se falhou:
    if(falha) $(".btn-pdf").addClass("cinza");
    else $(".btn-pdf").removeClass("cinza");
  }
  // vou chamar a função assim que o código iniciar, para já definir o botão como inválido:
  verificarCampos();
  
  $(".btn-pdf a").on("click",function(e){
    if($(this).parent().is(".cinza")){
      alert("Informe os dados para continuar");
      e.preventDefault();
    }
  });
});

.btn-pdf {
  text-align: center;
  float: right;
  margin: 0 5px;
}

.btn-pdf .fa-thumbs-down {
  background-color: #f3f3f3;
  color: #787878;
  padding: 20px;
  border-radius: 50px;
  display:none;
}

.btn-pdf .fa-thumbs-down:hover {
  background-color: #fbfbfb;
  transition: 0.2s;
}

.btn-pdf .fa-thumbs-up {
  background-color: #59bd59;
  color: #FFFFFF;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-up:hover {
  background-color: #68cb68;
  transition: 0.2s;
}

.btn-pdf a {
  text-align: center;
  font-family: 'KG Blank Space Solid';
  color: #303030;
  font-size: 13px;
}

.btn-pdf a:hover {
  text-decoration: none;
}

.btn-pdf.cinza .fa-thumbs-up{
  display:none;
}
.btn-pdf.cinza .fa-thumbs-down{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptdefersrc="https://use.fontawesome.com/releases/v5.0.11/js/all.js"></script>
<form id="msform" method="post">

<div class="form-group">
  <label>Telefone Válido*</label>
  <input id="celular" type="text" class="form-control" name="celular" placeholder="Telefone">
</div>

<div class="form-group">
  <label>Selecione uma Opção</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name= "PMA" value="200">Shopping 1</option>
    <option name = "BRB" value="200">Shopping 2</option>
  </select>
</div>

</form>

<div class="btn-pdf">
   <a href="http://google.com.br" target="_blank">
      <i class="far fa-thumbs-down fa-2x"></i>
      <i class="far fa-thumbs-up fa-2x"></i><br>Baixar PDF
   </a>
 </div>

But note: This code does not check if the number you entered is valid. And also does not block the click of the button if the gray class you said is in the element.

Explaining what I did: I used jQuery to run all fields, look for changes, and then check that all fields have been filled out. Then we add the gray class on the button, with the gray class the button hides the "positive" icon and shows the "negative". More explanations in the code comment.