jQuery addClass example

Change class name on click in jQuery

by Fulvio Cezar Canducci Dias

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<form class="form-horizontal" name="form1"> 

<div class=" panel-primary">
    <div class="panel-heading" style="text-align:center;">Cadastro de Fornecedor</div>
    
    <div class="panel-body">
<div class="form-group">

<div class="col-md-11 control-label">
        <p class="help-block"><h11>*</h11> Campo Obrigatório </p>
</div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="Nome">Fornecedor <h11>*</h11></label>  
  <div class="col-md-5">
  <input id="Nome" name="Nome" placeholder="PREENCHA COM O NOME DA EMPRESA OU COM O SEU PRÓPRIO NOME" class="form-control input-md" required="" type="text">
  </div>
   <label class="col-md-2 control-label" for="tipo">Tipo de Fornecedor <h11>*</h11></label>
  <div class="col-md-3"> 
    <label required="" class="radio-inline" for="radios-0" >
      <input name="tipo" id="PJ" value="PJ" for="tipo" type="radio" checked>
      Pessoa Jurídica
    </label> 
    <label class="radio-inline" for="radios-1">
      <input name="tipo" id="PF" value="PF" for="tipo" type="radio">
      Pessoa Física
    </label>
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label" for="Nome">Seguimento <h11>*</h11></label>  
  <div class="col-md-10">
  <input id="seguimento" name="seguimento" placeholder="Ex: COMÉRCIO VAREJISTA DE MATERIAIS DE CONSTRUÇÃO EM GERAL" class="form-control input-md" required="" type="text">
  </div>

</div>
<!-- Text input-->
<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-2 control-label" for="cpf">CPF <h11>*</h11></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="cpf" name="cpf" class="form-control" type="text"
onKeyPress="MascaraCPF(form1.cpf);" maxlength="14">
    </div>
  </div>
    <label class="col-md-1 control-label" for="cnpj">CNPJ <h11>*</h11></label>
     <div class="col-md-2">
    <div...

CSS

h11 {
    color:red;
}

#logo {
        width:50%;
        height:50%;
}

.panel-heading{
    font-size:150%;
}
.panel-heading{
    position: fixed !important;
    width: 100% !important;
    z-index: 999 !important; 
    border-radius: 0 !important;    
   background: linear-gradient(to bottom, #079a8d, #148eb1)!important;   
   box-shadow:4px 2px 2px #065186 !important;
}

body{
 
  background:#08b0e1 !important;
  }

.panel-body{
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#00aee0))!important;
  background: linear-gradient(to bottom, #ffffff, #00aee0)!important;
  border:none !important;
  position: relative;
}

JavaScript

function limpa_formulario_cep() {
            //Limpa valores do formulário de cep.
            document.getElementById('rua').value=("");
            document.getElementById('bairro').value=("");
            document.getElementById('cidade').value=("");
            document.getElementById('estado').value=("");
            
    }

    function meu_callback(conteudo) {
        if (!("erro" in conteudo)) {
            //Atualiza os campos com os valores.
            document.getElementById('rua').value=(conteudo.logradouro);
            document.getElementById('bairro').value=(conteudo.bairro);
            document.getElementById('cidade').value=(conteudo.localidade);
            document.getElementById('estado').value=(conteudo.uf);
        } //end if.
        else {
            //CEP não Encontrado.
            limpa_formulario_cep();
            alert("CEP não encontrado.");
            document.getElementById('cep').value=("");
        }
    }
        
    function pesquisacep(valor) {

        //Nova variável "cep" somente com dígitos.

		
        var cep = valor.replace(/\D/g, '');

        //Verifica se campo cep possui valor informado.
        if (cep !== "") {

            //Expressão regular para validar o CEP.
            var validacep = /^[0-9]{8}$/;

            //Valida o formato do CEP.
            if(validacep.test(cep)) {

                //Preenche os campos com "..." enquanto consulta webservice.
                document.getElementById('rua').value="...";
                document.getElementById('bairro').value="...";
                document.getElementById('cidade').value="...";
                document.getElementById('estado').value="...";

								$.get('https://viacep.com.br/ws/'+cep+'/json/')
                	.then(function(result) {
                  	if (result) {
                    document.getElementById('rua').value=result.logradouro;
                    document.getElementById('bairro').value=result.bairro;
                   ...