Why is my jquery script not working in my web form that was inherited from MasterPage?

I have a main page and in my head I have:

<script src="Script/jquery.min.js"></script>
<link href="Stylesheet/Master.css" rel="stylesheet" />

and I have a web form (named = Login.aspx) that was inherited from my main page, in Login.aspx I have:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <input id="t1" type="password" placeholder="Passwords" class="login-input-class1" runat="server"  ClientID="Static" />
     <input id="t2" type="text" placeholder="ConfirmPasswords" class="login-input-class1" runat="server"  ClientID="Static"/>
     <label class="display" id="lblerror">Error</label>

 <script>

      $(document).ready(function () {

          $("#t2").change(function () {
              if ($("#t1").val() === $("#t2").val()) {
                  $("#lblerror").addClass("display");
              }

              else {
                  $("#lblerror").removeClass("display");
              }
          });
      });

</script>                    

</asp:Content>

and in Master.css I have:

.display {
 display:none;

}

But my script is not working, what is the problem?

+3
source share
2 answers

Because the identifier changes at runtime. You must use ClientIdfor your controls.

You can also use ClientIDMode="Static"to stop the original form from changing shape.
Learn more about client ID mode.

$("#<%= Control.ClientID %>").addClass("display");

  $("#<%=t2.ClientID %>").change(function () {
                if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
                   $("#lblerror%>").addClass("display");
                }
               else {
                   $("#lblerror").removeClass("display");
                }
            });

Change 1

<input id="t1" type="password" placeholder="Password" class="login-input-class1"
        runat="server" />
<input id="t2" type="text" placeholder="ConfirmPassword" class="login-input-class1"
        runat="server" />

And jQuery

 $(document).ready(function () {
        $("#<%=t2.ClientID %>").change(function () {
            if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
                $("#lblerror%>").addClass("display");
            }
            else {
                $("#lblerror").removeClass("display");
            }
        });
    });    
+5
source

, :

if ($("#t2").val() === $("#t1").val()) {

if ($(this).val() === $("#t1").val()) {

:

if ($("#t1").val() === $("#t1").val()) {
0

All Articles