0

Estou com uma função, que ao clicar no dropdownlist, ela verifica e muda a máscara de um campo:

function HideTextBox(ddlId) {
  var ControlName = document.getElementById(ddlId.id);

  if (ControlName.value == 'P') //it depends on which value Selection do u want to hide or show your textbox 
  {
    document.getElementById('txtCpf').style.display = '';
    $("#txtCpf").mask("999.999.999-99");
  } else {
    document.getElementById('txtCpf').style.display = '';

    $("#txtCpf").mask("99.999.999/9999-99");
  }
}

Esse é o meu html:

<div class="grid-1-3 margin-txt">
  <asp:Label ID="Label5" runat="server" Text="Tipo de Pessoa:"></asp:Label>
  <asp:DropDownList ID="ddlIDType" runat="server" onchange="HideTextBox(this);" CssClass="form-control">
    <asp:ListItem Value="P">Física</asp:ListItem>
    <asp:ListItem Value="L">Jurídica</asp:ListItem>
  </asp:DropDownList>
</div>
<div class="grid-1-3  margin-txt">
  <asp:Label ID="Label4" runat="server" Text="CPF ou CNPJ"></asp:Label>
  <asp:TextBox ID="txtCpf" runat="server" CssClass="form-control" placeholder="CPF ou CNPJ" required="required"></asp:TextBox>
</div>

Porém quando eu não seleciono o campo, ele não carrega a máscara, como posso chamar a função no load do form, passando o campo "ddlIDType" ? Eu tentei passando assim, porém ele me retorna erro:

ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "HideTextBox(" + ddlIDType.SelectedValue + ");", true);

Erro que está me retornando quando carrego a função dessa forma no load:

Uncaught ReferenceError: HideTextBox is not defined

2 Respostas 2

1

A primeira que fiz foi remover o onchange="HideTextBox(this);".

Utilizando o jquery, busquei o elemento utilizando a seguinte notação $("[id$='ddlIDType']"), onde o id$ que seria a forma de pegar o elemento desejado que termine com algo especificado.

Assim eu consigo definir uma function para o evento change do elemento: .on('change', function () {.

Para pegar o valor do DropDownList eu $(this).val() que seria basicamente a mesma coisa que fazer $("[id$='ddlIDType']").val(), mas como estou dentro da function que foi implementada para o evento do elemento, o this já representa esse elemento para o qual implementamos o evento.

<div class="grid-1-3 margin-txt">
    <asp:Label ID="Label5" runat="server" Text="Tipo de Pessoa:"></asp:Label>
    <asp:DropDownList ID="ddlIDType" runat="server" CssClass="form-control">
        <asp:ListItem Value="P">Física</asp:ListItem>
        <asp:ListItem Value="L">Jurídica</asp:ListItem>
    </asp:DropDownList>
</div>
<div class="grid-1-3  margin-txt">
    <asp:Label ID="Label4" runat="server" Text="CPF ou CNPJ"></asp:Label>
    <asp:TextBox ID="txtCpf" runat="server" CssClass="form-control" placeholder="CPF ou CNPJ" required="required"></asp:TextBox>
</div>

    <script type="text/javascript">
    $(document).ready(function () {
        function Mascarar() {
            if ($("[id$='ddlIDType']").val() == 'P') {
                document.getElementById('txtCpf').style.display = '';
                $("#txtCpf").mask("999.999.999-99");
            } else {
                document.getElementById('txtCpf').style.display = '';

                $("#txtCpf").mask("99.999.999/9999-99");
            }
        }

        Mascarar();

        $("[id$='ddlIDType']").on('change', function () {                
            Mascarar();
        })
    });
</script>

Para uma melhor compreensão, o código fonte está em meu github

7
  • Dessa forma ele já funciona, que é clicando no ddlidtype ele altera a máscara, porém preciso pra quando ele realize o load do formulário, que ele venha com a máscara preenchida de pessoa física, que é o que não está ocorrendo.
    – Mariana
    Commented 6/12/2017 às 11:24
  • Então, coloquei a chamada $("#txtCpf").mask("999.999.999-99"); fora do evento, como primeira instrução a ser executada quando a pagina estiver carregada. Commented 6/12/2017 às 11:26
  • Mas quando o campo já vem preenchido com CNPJ, ele sempre carrega a máscara de CPF, ele só muda para CNPJ se eu altero no dropdownlist.
    – Mariana
    Commented 6/12/2017 às 11:28
  • Eu encapsulei a lógica de mascara em uma function, vê se agora te ajuda Commented 6/12/2017 às 11:31
  • Dessa forma ele ficou somente na máscara do CNPJ, e ele tem q ser carregado conforme o dropdownlist, por isso eu queria q ele chamasse no load do formulário, pq se o txtid tivesse vazio, ele chamava a função da máscara CPF, senão ele carregava a do CNPJ.
    – Mariana
    Commented 6/12/2017 às 11:33
0

Eu faço da seguinte forma:

 <select id="cbotipo" ClientIDMode="static" runat="server">
    <option value="1">Pessoa Jurídica</option> 
    <option value="2">Pessoa Física</option> 
</select>

ou

  <asp:DropDownList ID="cbotipo" runat="server" ClientIDMode="static">
<asp:ListItem Value="1">Pessoa Jurídica</asp:ListItem>
<asp:ListItem Value="2">Pessoa Física</asp:ListItem>

E utilizo isto dentro o meu script (usando JQuery):

$("#txtcnpj").mask("99.999.999/9999-99");
    $("#lblcnpj").text("CNPJ");

    $(function () {
        $("#cbotipo").change(function () {
            if ($("#cbotipo").val() == 2) {
                $("#txtcnpj").mask("999.999.999-99");
                $("#lblcnpj").text("CPF")
            } else {
                $("#txtcnpj").mask("99.999.999/9999-99");
                $("#lblcnpj").text("CNPJ");
            }
        });
    });

É importante ressaltar que para Javascript ou CSS (qualquer coisa no lado cliente), é preciso utilizar a tag ClientIDMode="static" quando se usar campos do ASP.NET

2
  • Na realidade não precisa definir o ClientIDMode="static", só que você precisa pegar o elemento que termine com o id, assim $("[id$='ddlIDType']"). Commented 6/12/2017 às 11:14
  • Dessa forma ele funciona igual o meu já estava funcionando, eu preciso carregar a função no load do form, do seu jeito, ele sempre carrega a máscara de pessoa física no load, só muda se eu altero o ddlIDType
    – Mariana
    Commented 6/12/2017 às 11:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .