Delete data from hidden fields with javascript

Asked

Viewed 41 times

0

I have html code that hides and disables fields according to the choice of Cpf or cnpj, my question is how can I use javascript to delete the data that was typed as soon as the capos are disabled?

$('#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-->
<br>
<!-- 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'><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'><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'><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'><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'><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

javascript html5 twitter-bootstrap

1 answer

0


Add a <form> and use the method reset() to clear data when changing customer type.

$('#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');

  $('#clienteForm')[0].reset();
})

$(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;
    }
  });
});
@import "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css";
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.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-->
<br>
<form id="clienteForm">
<!-- 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'><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'><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'><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'><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'><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->
</form>

  • Excellent. Mto thanks worked out!

Browser other questions tagged javascript html5 twitter-bootstrap

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