Call function by passing field

Asked

Viewed 386 times

0

I have a function, that when clicking on the dropdownlist, it checks and changes the mask of a field:

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");
  }
}

This is my 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>

But when I do not select the field, it does not load the mask, how can I call the function in the form load, passing the field "ddlIDType"? I tried to pass like this, but it returns me error:

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

Error that is returning me when I load the function this way in the load:

Uncaught Referenceerror: Hidetextbox is not defined

javascript asp.net webforms

2 answers

1


The first thing I did was remove the onchange="HideTextBox(this);".

Using the jquery, I searched the element using the following notation $("[id$='ddlIDType']"), where the id$ which would be the way to take the desired element that ends with something specified.

So I can define a Function for the event change of the element: .on('change', function () {.

To take the value of Dropdownlist me $(this).val() that would be basically the same thing to do $("[id$='ddlIDType']").val(), but how I’m inside the Function which was implemented for the event of the element, the this already represents this element for which we implemented the event.

<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>

For a better understanding, the source code is in my github

  • This way it already works, which is by clicking on the ddlidtype it changes the mask, but I need for when it loads the form, that it comes with the mask filled with physical person, which is what is not happening.

  • So I put the call $("#txtCpf").mask("999.999.999-99"); outside the event, as the first instruction to be executed when the page is loaded.

  • But when the field already comes filled with CNPJ, it always loads the cpf mask, it only changes to CNPJ if I change in the dropdownlist.

  • I encapsulated the mask logic in a Function, see if it helps you now

  • So it was only on the CNPJ mask, and it has q be loaded according to the dropdownlist, so I wanted q it called in the form load, because if the txtid had empty, it called the CPF mask function, otherwise it would load the CNPJ.

  • Actually I missed taking the value of the element, but I already edited the answer

  • Now yes Pablo rs, thank you so much for the help, it worked perfectly.

Show 2 more comments

0

I do it this way:

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

or

  <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>

And I use this in my script (using 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");
            }
        });
    });

IS important emphasize that for Javascript or CSS (anything in client side), it is necessary to use the tag Clientidmode="Static" when using fields of ASP.NET

  • You don’t really need to define the ClientIDMode="static", only that you need to take the element that ends with the id, so $("[id$='ddlIDType']").

  • This way it works the same as mine was already working, I need to load the function in the form load, in its way, it always loads the mask of the physical person in the load, only changes if I change the ddlIDType

Browser other questions tagged javascript asp.net webforms

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