Applying CNPJ Mask to Dynamically Add/Remove Fields

Question

Applying CNPJ Mask to Dynamically Add/Remove Fields

Asked 5 years ago

Viewed 123 times

-1

var corCompleta = "#99ff8f"
var corIncompleta = "#eff70b"

function ResetCampos() {
  var textFields = document.getElementsByTagName("input");
  for (var i = 0; i < textFields.length; i++) {
    if (textFields[i].type == "text") {
      textFields[i].style.backgroundColor = "";
      textFields[i].style.borderColor = "";
    }
  }
}

function coresMask(t) {
  var l = t.value;
  var m = l.length;
  var x = t.maxLength;
  if (m == 0) {
    t.style.borderColor = "";
    t.style.backgroundColor = "";
  } else if (m < x) {
    t.style.borderColor = corIncompleta;
    t.style.backgroundColor = corIncompleta;
  } else {
    t.style.borderColor = corCompleta;
    t.style.backgroundColor = corCompleta;
  }
}

function mascara(m, t, e, c) {
  var cursor = t.selectionStart;
  var texto = t.value;
  texto = texto.replace(/\D/g, '');
  var l = texto.length;
  var lm = m.length;
  if (window.event) {
    id = e.keyCode;
  } else if (e.which) {
    id = e.which;
  }
  cursorfixo = false;

  if (texto == '') return false;

  if (texto.length != 14)
    return false;

  // Elimina CNPJs invalidos conhecidos
  if (texto == "00000000000000" ||
    texto == "11111111111111" ||
    texto == "22222222222222" ||
    texto == "33333333333333" ||
    texto == "44444444444444" ||
    texto == "55555555555555" ||
    texto == "66666666666666" ||
    texto == "77777777777777" ||
    texto == "88888888888888" ||
    texto == "99999999999999")
    return false;

  if (cursor < l) cursorfixo = true;
  var livre = false;
  if (id == 16 || id == 19 || (id >= 33 && id <= 40)) livre = true;
  ii = 0;
  mm = 0;
  if (!livre) {
    if (id != 8) {
      t.value = "";
      j = 0;
      for (i = 0; i < lm; i++) {
        if (m.substr(i, 1) == "#") {
          t.value += texto.substr(j, 1);
          j++;
        } else if (m.substr(i, 1) != "#") {
          t.value += m.substr(i, 1);
        }
        if (id != 8 && !cursorfixo) cursor++;
        if ((j) == l + 1) break;

      }
    }
    if (c) coresMask(t);
  }
  if (cursorfixo && !livre) cursor--;
  t.setSelectionRange(cursor, cursor);
}

function ResetCampos() {
  for (var o = document.getElementsByTagName("input"), e = 0; e < o.length; e++) "text" == o[e].type && (o[e].style.backgroundColor = "", o[e].style.borderColor = "")
}

function coresMask(o) {
  var e = o.value,
    r = e.length,
    t = o.maxLength;
  0 == r ? (o.style.borderColor = "", o.style.backgroundColor = "") : r < t ? (o.style.borderColor = corIncompleta, o.style.backgroundColor = corIncompleta) : (o.style.borderColor = corCompleta, o.style.backgroundColor = corCompleta)
}

function mascara(o, e, r, t) {
  var l = e.selectionStart,
    a = e.value;
  a = a.replace(/\D/g, "");
  var s = a.length,
    c = o.length;
  window.event ? id = r.keyCode : r.which && (id = r.which), cursorfixo = !1, l < s && (cursorfixo = !0);
  var n = !1;
  if ((16 == id || 19 == id || id >= 33 && id <= 40) && (n = !0), ii = 0, mm = 0, !n) {
    if (8 != id)
      for (e.value = "", j = 0, i = 0; i < c && ("#" == o.substr(i, 1) ? (e.value += a.substr(j, 1), j++) : "#" != o.substr(i, 1) && (e.value += o.substr(i, 1)), 8 == id || cursorfixo || l++, j != s + 1); i++);
    t && coresMask(e)
  }
  cursorfixo && !n && l--, e.setSelectionRange(l, l)
}
var corCompleta = "",
  corIncompleta = "";

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Cadastro Novas Unidades Consumidoras</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--===============================================================================================-->
  <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="css/util.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!--===============================================================================================-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="/formularios/resource/1559844563000/alertJs" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="js/mascara.min.js"></script>
  <script language="jquery.js" src="js/main.js" type="text/javascript"></script>

</head>

<body>

  <div class="bg-contact3" style="background-image: url('images/bg-01.png');">

    <div class="container-contact3">

      <div class="wrap-contact3">

        <form class="form_principal" method="post">

          <span class="contact3-form-title">
						Parabéns pela Excelente Contratação
					</span>

          <span class="contact3-form">
                        Cadastramento de Unidades Consumidoras
                    </span>

          <div class="wrap-input3 validate-input" data-validate="Nome é obrigatório">
            <input class="input3" type="text" name="name" required autofocus placeholder="Seu Nome">
            <span class="focus-input3"></span>
          </div>

          <div class="wrap-input3 validate-input" data-validate="Email valido é requerido: [email protected]">
            <input class="input3" type="text" name="email" required placeholder="Seu Email">
            <span class="focus-input3"></span>
          </div>

          <div class="wrap-input3 validate-input" data-validate="CNPJ é obrigatório">
            <input type="text" id="cnpj" class="input3" maxlength="18" required placeholder="Digite o CNPJ do Contrante" onkeyup="mascara('##.###.###/####-##',this,event,true)">
            <span class="focus-input3"></span>
          </div>

          <div class="wrap-input3 validate-input" data-validate="Razão Social é Obrigatório">
            <input class="input3" type="text" name="razaosocial" placeholder="Razão Social">
            <span class="focus-input3"></span>
          </div>

          <div>
            <select class="selection-2" name="submercado">
              <option value="" disabled selected>Selecione o Submercado</option>
              <option>Nordeste</option>
              <option>Norte</option>
              <option>Sudeste/Centro-Oeste</option>
              <option>Sul</option>
            </select>
          </div>

          <span class="focus-input3"></span>

          <script>
            //Total máximo de campos que você permitirá criar em seu site:
            var totalCampos = 50;

            //Não altere os valores abaixo, pois são variáveis controle;
            var iLoop = 1;
            var iCount = 0;
            var UnidadeAtual;


            function AddCampos() {
              var hidden1 = document.getElementById("hidden1");
              var hidden2 = document.getElementById("hidden2");

              //Executar apenas se houver possibilidade de inserção de novos campos:
              if (iCount < totalCampos) {

                //Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
                hidden2.value = "";

                //Atualizando a lista dos campos que estão ocultos.
                //Essa lista ficará armazenada temporiariamente em hidden2;
                for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
                  if (document.getElementById("Unidade" + iLoop).style.display == "none") {
                    if (hidden2.value == "") {
                      hidden2.value = "Unidade" + iLoop;
                    } else {
                      hidden2.value += ",Unidade" + iLoop;
                    }
                  }
                }
                //Quebrando a lista que foi armazenada em hidden2 em array:

                UnidadesOcultas = hidden2.value.split(",");


                if (UnidadesOcultas.length > 0) {
                  //Tornar visível o primeiro elemento de UnidadesOcultas:
                  document.getElementById(UnidadesOcultas[0]).style.display = "block";
                  iCount++;

                  //Acrescentando o índice zero a hidden1:
                  if (hidden1.value == "") {
                    hidden1.value = UnidadesOcultas[0];
                  } else {
                    hidden1.value += "," + UnidadesOcultas[0];
                  }

                  /*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!*/
                  if (hidden2.value.indexOf("," + UnidadesOcultas[0]) != -1) {
                    hidden2.value = hidden2.value.replace(UnidadesOcultas[0] + ",", "");
                  } else if (hidden2.indexOf(UnidadesOcultas[0] + ",") == 0) {
                    hidden2.value = hidden2.value.replace(UnidadesOcultas[0] + ",", "");
                  } else {
                    hidden2.value = "";
                  }

                }
              }
            }

            function RemoverCampos(id) {
              //Criando ponteiro para hidden1:        
              var hidden1 = document.getElementById("hidden1");

              //Pegar o valor do campo que será excluído:
              var campoValor = document.getElementById("nome_unidade" + id).value;
              //Se o campo não tiver nenhum valor, atribuir a string: vazio:
              if (campoValor == "") {
                campoValor = "vazio";
              }

              if (confirm("A Unidade Consumidora:\n» " + campoValor + "\nserá excluído!\n\nDeseja prosseguir?")) {
                document.getElementById("Unidade" + id).style.display = "none";
                iCount--;

                //Removendo o valor de hidden1:
                if (hidden1.value.indexOf(",Unidade" + id) != -1) {
                  hidden1.value = hidden1.value.replace(",Unidade" + id, "");
                } else if (hidden1.value.indexOf("Unidade" + id + ",") == 0) {
                  hidden1.value = hidden1.value.replace("Unidade" + id + ",", "");
                } else {
                  hidden1.value = "";
                }

              }
            }

            $(document).ready(function() {
              $('span[id^=Unidade] input').on("input");
            });

            //Escrevendo o código-fonte HTML e ocultando os campos criados:
            for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
              document.write(
                "<span class='input3' id='Unidade" + iLoop + "' style='display:none'><div class='wrap-input3 validate-input'>" + iLoop + ":<input class='input3' type='text' placeholder='Nome da Unidade Consumidora' required name='nome_unidade" + iLoop + "' id='nome_unidade" + iLoop + "'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite o CNPJ' maxlength='18' required  name='CNPJ" + iLoop + "' id='CNPJ" + iLoop + "' onkeyup='mascara('##.###.###/####-##',this,event,true)'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite a Inscrição Estadual' name='IE" + iLoop + "' id='IE" + iLoop + "' /></div> <input type='button' class='btn-remove-campos' value='Remover' onclick='RemoverCampos(\"" + iLoop + "\")'></span>");
            }
          </script>


          <form name="form_unidadeconsumidora" action="" method="post">
            <br><br><br>
            <input class="btn-add-campos" type="button" value="Adicionar Unidade Consumidora" onclick="AddCampos()">
            <br><br><input type="hidden" name="hidden1" id="hidden1">
            <input type="hidden" name="hidden2" id="hidden2">
          </form>

          <div class="container-contact3-form-btn">
            <button class="contact3-form-btn">
							Enviar
						</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <!--===============================================================================================-->
  <div id="dropDownSelect1"></div>
  <!--===============================================================================================-->
  <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/bootstrap/js/popper.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/select2/select2.min.js"></script>
  <script>
    $(".selection-2").select2({
      minimumResultsForSearch: 20,
      dropdownParent: $('#dropDownSelect1')
    });
  </script>
  <!--===============================================================================================-->
  <script src="js/main.js"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-23581568-13');
  </script>

</body>

</html>

I’m trying to apply a mask to a dynamic field that can be dynamically added or removed. I’m not getting the mask, I just don’t apply it. The code snippet that I use to apply it to the dynamic field is:

for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
                  document.write(
                    "<span class='input3' id='Unidade" + iLoop + "' style='display:none'><div class='wrap-input3 validate-input'>" + iLoop + ":<input class='input3' type='text' placeholder='Nome da Unidade Consumidora' required name='nome_unidade" + iLoop + "' id='nome_unidade" + iLoop + "'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite o CNPJ' maxlength='18' required  name='CNPJ" + iLoop + "' id='CNPJ" + iLoop + "' onkeyup='mascara('##.###.###/####-##',this,event,true)'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite a Inscrição Estadual' name='IE" + iLoop + "' id='IE" + iLoop + "' /></div> <input type='button' class='btn-remove-campos' value='Remover' onclick='RemoverCampos(\"" + iLoop + "\")'></span>");

In the static field the mask works perfectly. Follow the code section, where I apply the mask to the static field:

<div class="wrap-input3 validate-input" data-validate="CNPJ é obrigatório">
        <input type="text" id="cnpj" class="input3" maxlength="18" required placeholder="Digite o CNPJ do Contrante" onkeyup="mascara('##.###.###/####-##',this,event,true)">
        <span class="focus-input3"></span>
      </div>

Could someone help me apply the mask in the dynamic field ?

Then, editing the code I realized when it is executed that the <div> generated in the dynamic field generates this result : <input class="input3" type="text" placeholder="Type the CNPJ" maxlength="18" required="name="CNPJ2" id="CNPJ2" onkeyup="mascara(##.###.####/####-##,this,Event,true)"> You notice that in the onkeyup="mascara field(##.###.#####/#####-#,this,Event,true)", a single quotation is missing from the ##parameter. ###. ###/####-##, but I can’t add these quotes in the dynamic field, only in the static field. I’m looking for a solution to this.

– Matheus Cardoso

2019/11/08 at 13:40
I found a solution using jquery, but still encounter difficulties <script> jQuery(Function($){ var Count = 1; for (Count=1; Count<=totalfields; Count++) "CNPJ"+Count; $("#CNPJ").Mask("99.999.999/9999-99"); }); </script>

– Matheus Cardoso

2019/11/08 at 14:34

1 answer

Browser other questions tagged form dinâmico fields

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

by Matheus Cardoso • 1 point · Answer 1 · 2019-11-08T14:38:03+00:00

I found a solution using jquery, but still find difficulties

                    <script>
                        jQuery(function($){
                            var count = 1;
                            for (count=1; count<=totalcampos; count++)
                                    "CNPJ"+count; /* Minha dúvida está aqui!
                                   $("#CNPJ").mask("99.999.999/9999-99");                            
                        });
                    </script>

My above algorithm creates up to 50 fields dynamically, the solution I found is using Jquery. However, I have doubts in language semantics, how can I concatenate the name of the CNPJ variable inside the FOR of 1 ~ 50 correctly.