Questions on how to use javascript with visible and hidden fields

Asked

Viewed 56 times

2

I have the following doubts: 1- In my code you have two options (CPF/CNPJ) and the options only appear when you click on one of the two, I wonder how I can do so that the Cpf option first appears active? 2-How can I put "required" and "autofocus" in the fields only when they are active and when hidden do not have these resources? I appreciate anyone who can help. Follows my code:

$('#radioBtn a').on('click', function() {
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#' + tog).prop('value', sel);

  $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
})

jQuery(document).ready(function() {
  $("#info2").hide();
  $(".inf").click(function() {
    var nodo = $(this).attr("href");

    if ($(nodo).is(":visible")) {
  //$(nodo).hide();
  return false;
} else {
  $(".oculto").hide("slow").find(':input').prop('disabled', true);
  $(nodo).fadeToggle("fast").find(':input').prop('disabled', false);
  return false;
}
  });
});
//CAMPO CPF
function inpMask(){
var phones = [{ "mask": "###.###.###-##"}];
$('#cpf').inputmask({ 
mask: phones, 
greedy: false, 
definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
}
										
$(window).load(inpMask);
										
$(document).on("click", ":submit", function(){
var cpf = $("#cpf");
if($(cpf).is(":visible") && $(cpf, "form").val() == ""){	$(cpf).inputmask('remove');
}
											
$(cpf).keyup(inpMask);
});
//FIM CAMPO CPF
                    
//CAMPO CNPJ
function inpMask(){
var phones = [{ "mask": "##.###.###/####-##"}];
$('#cnpj').inputmask({ 
mask: phones, 
greedy: false, 
definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
}
					
$(window).load(inpMask);
					
$(document).on("click", ":submit", function(){
var cnpj = $("#cnpj");
if($(cnpj).is(":visible") && $(cnpj, "form").val() == ""){
$(cnpj).inputmask('remove');
}
						
$(cnpj).keyup(inpMask);
});
//FIM CAMPO CNPJ
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<!--TIPO DE CLIENTE-->
<h4><b>Tipo de Cliente:<h4>
   <div class="row">
      <div class="col-md-4" >
         <div class="input-group">
            <div id="radioBtn" class="btn-group">
               <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
               <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
            </div>
         </div>
      </div>
   </div>
<!--FIM TIPO DE CLIENTE-->

<!-- COLUNA CPF-->
<div class="row oculto" id="info1">					
   <!--Campo Nome-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="nome">Nome:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
            </div>
            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo Nome-->
						
   <!--Campo CPF-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="cpf">CPF:</label>
         <div class="input-group">
            <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CPF-->
						
</div>
<!--FIM COLUNA CPF-->	
					
<!-- COLUNA CNPJ-->
<div class="row oculto" id="info2">					
   <!--Campo RAZAO_SOCIAL-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Razão Social:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo RAZAO_SOCIAL-->
						
   <!--Campo NOME_FANTASIA-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Nome Fantasia:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo NOME_FANTASIA-->
						 
   <!--Campo CNPJ-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">CNPJ:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

javascript html5 twitter-bootstrap bootstrap-3

2 answers

1


To not hide the CPF tab when the page is loaded simply... Do not hide it.

You’re doing it manually with the code $(".oculto").hide(), utilize $("#info2").hide() to hide only the CNPJ.

Now as to removing the property required, I would recommend you instead of doing this, add the property disabled. Thus the input will not be required, nor will it be sent, are two birds one stone.

Would look like this:

if ($(nodo).is(":visible")) {
  //$(nodo).hide();
  return false;
} else {
  $(".oculto").hide("slow").find(':input').prop('disabled', true);
  $(nodo).fadeToggle("fast").find(':input').prop('disabled', false);
  return false;
}

Of course, you can also use this same logic to enable and disable the property required if you prefer.

  • Perfect! Thank you very much. I have another question. I will edit the question for you to understand.

  • How can I do when this element is disabled can also be cleaned if there is something previously written?

0

You can only use one event to do everything. Put the CSS class in:

<style>
.oculto{
   display: none;
}
</style>

And in the div#infos2 enter the class .oculto so that it is hidden from the beginning. Also put in both Ivs (#info1 and #info2) a class to manipulate in jQuery (I put the class .infos):

<div class="row infos" id="info1">

and

<div class="row infos oculto" id="info2">

Note that in the #info2 has the class .oculto.

Now just hide one when the other is visible and vice versa, and remove the attribute required of the inputs of the hidden div and add in the inputs of the visible div, and use the method .focus() to focus on the first visible div input:

jQuery(document).ready(function() {
   $('#radioBtn a').on('click', function() {
      var sel = $(this).data('title');
      var tog = $(this).data('toggle');
      $('#' + tog).prop('value', sel);
      
      $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
      $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
   
      var id = $(this).attr("href");
      $("div.infos:visible")
      .hide("slow")
      .find("input")
      .prop("required", false);
   
      $(id)
      .show("fast", function(){
         $(this)
         .find("input")
         .prop("required", true);
   
         $(this)
         .find("input:first")
         .focus();
      });
   });
});
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}

.oculto{
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--TIPO DE CLIENTE-->
<h4><b>Tipo de Cliente:<h4>
   <div class="row">
      <div class="col-md-4" >
         <div class="input-group">
            <div id="radioBtn" class="btn-group">
               <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
               <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
            </div>
         </div>
      </div>
   </div>
<!--FIM TIPO DE CLIENTE-->

<!-- COLUNA CPF-->
<div class="row infos" id="info1">					
   <!--Campo Nome-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="nome">Nome:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
            </div>
            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo Nome-->
						
   <!--Campo CPF-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="cpf">CPF:</label>
         <div class="input-group">
            <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CPF-->
						
</div>
<!--FIM COLUNA CPF-->	
					
<!-- COLUNA CNPJ-->
<div class="row infos oculto" id="info2">					
   <!--Campo RAZAO_SOCIAL-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Razão Social:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo RAZAO_SOCIAL-->
						
   <!--Campo NOME_FANTASIA-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Nome Fantasia:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo NOME_FANTASIA-->
						 
   <!--Campo CNPJ-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">CNPJ:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

  • Mto thank you for the reply friend. Mto know that there are several ways to do the same thing.

Browser other questions tagged javascript html5 twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.