Home / Questions / 141892
Accepted
sunflower
Asked: 2020-02-28 09:56:06 +0800 CST 2020-02-28 09:56:06 +0800 CST

How to activate a button when filling two textboxes in a webform? ASP .NET C#

  • 772

I need a button to be disabled until the fields of two TextBoxes are filled.

I use webform with c# in asp.net, I have a form to change the password, and until the fields are filled with their validations already done, the button must be activated. When the two textboxes are filled, the button is enabled, which shows a modal with a message that the pin has been updated and you must close the session.

I have the following code

<div id="cp"> 
<div class="form-group">
<div class="col-sm-10">
<asp:Label ID="lnnip" runat="server" Text="INGRESE UN NUEVO NIP DE 4 NUMEROS"></asp:Label>
<asp:textbox TextMode = "Password" id="clave1" maxlength="4"  
minlength="4" placeholder="NUEVO NIP" runat="server" autocomplete="off"  
TextChanged="clave1_TextChanged"></asp:textbox>
<asp:RequiredFieldValidator runat="server" for="n1" id="n1"   
controltovalidate="clave1" errormessage="Este campo no puede quedar 
vacío"/>
</div>
</div>

<!--CONFIRMAR NIP-->    
<div class="form-group">
<div class="col-sm-10">
<asp:textbox TextMode = "Password" id="clave2" maxlength="4" minlength="4" placeholder="CONFIRMAR NIP" runat="server" autocomplete="off"> 
</asp:textbox>
<asp:RequiredFieldValidator runat="server" for="n2" id="n2" 
controltovalidate="clave2" errormessage="Este campo no puede quedar  
vacío" />
</div>
</div>

<!--CONFIRMAR-->       
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Button runat="server" name="Mnip" id="Mnip" data-toggle="modal" data-target="#nnm" class="btn btn-primary nav-link" text="CONFIRMAR">  
</asp:Button>

<!--COMPARAR NIPS-->    
<asp:CompareValidator id= "CompareValidator1" runat = "server" 
 ControlToCompare = "clave1" ControlToValidate = "clave2" ErrorMessage = 
"LOS NIP NO SON IGUALES"></asp:CompareValidator> 
 </div>
 </div>

 <!--VENTANA MODAL-->
<div class="modal fade" id="nnm" tabindex="-1" role="dialog" aria-labelledby="nnmlLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
       <div class="modal-body">
       <h1>NIP GUARDADO CON EXITO
        <asp:Button name="ConfNIP" id="ConfNIP" runat="server" text="ACEPTAR" OnClick="ConfNIP_Click" class="btn btn-primary"/></h1>
      </div>
   </div>
   </div>
    </div>
   <!-- VENTANA MODAL-->

    </div>
    </asp:Content>

Thanks greetings

c#

1 Answers

  1. Best Answer

    You can use jQuery and add a function that runs on changing the value of the textboxes, then use CSS to enable the button.

    add this code to the javascripts of your page:

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script>

        $(document).ready(function () {

            function checkFields() {                    
                $(".senderButton").prop( "disabled", !($(".checkfield1").val() != "" && $(".checkfield2").val() != ""));                    
            }

            checkFields();
            $(".checkfield1").change(checkFields);
            $(".checkfield2").change(checkFields);
        });

    </script>

    to one field add the property CssClass="checkfield1" to the other add the property CssClass="checkfield2"

    to the button put CssClass="senderButton"

    • 1