Call function passing field

Question

Call function passing field

Navigation

#1 by (1 votes)
#2 by (0 votes)

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's load, passing the field "ddlIDType"? I tried to pass it like this, however it returns me error:

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

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

Uncaught ReferenceError: HideTextBox is not defined

javascript asp.net webforms

asked by anonymous 06.12.2017 / 11:30

2 answers

0

I do this as follows:

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

It is important to point out that for Javascript or CSS (anything on the client side ), you need to use ClientIDMode="static" when using ASP.NET fields

06.12.2017 / 11:44

Return does not work Problem with alignment with responsiveness

score 1 · Accepted Answer

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

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

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

To get the DropDownList value I $(this).val() which would be basically the same as doing $("[id$='ddlIDType']").val() , but as I am inside the function that was implemented for element element already represents that 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