none
¿Como cambiar el texto de un boton al darle click? RRS feed

  • Pregunta

  • Hola lo que necesito es cambiar el texto de un boton al darle click. Tengo un boton "Aceptar" y cuando le de click quiero que el texto cambie a "Cargando..." y que el boton se deshabilite.

    trabajo con <asp:Button type="button" runat="server" text="ACEPTAR" ... .net

    Gracias por leer.


    • Editado Sunflower18 jueves, 12 de abril de 2018 16:06
    jueves, 12 de abril de 2018 16:06

Todas las respuestas

  • Si lo quieres hacer de una forma burda y rapida, activa la propiedad del boton a autopostaback true, y en el evento click del boton setea el texto al valor que deseas y en el enable setearlo a false, sin embargo si lo que deseas hacer es para que el usuario aguarde hasta finalizar algún proceso, esto no te servira, pues ese botón quedará deshabilitado hasta que se regrese el postback cuando finalize tu proceso.

    Si lo que quieres es mostrar alguna señal de procesamiento para que el usuario aguarde como un progress bar o algun gift animado o bien hacer un comportamiento adecuado para tu botón te convendria utilizar quiza Update Panels o alguna funcionalidad con AJAX.

    Saludos


    Carlos Aldi



    • Editado Carlos Aldi jueves, 12 de abril de 2018 17:05
    • Propuesto como respuesta Carlos Aldi jueves, 31 de mayo de 2018 17:53
    jueves, 12 de abril de 2018 16:21
  • Si está utilizando webforms, puede hacer preguntas en el foro para ello.  Es el llamado ASP.net.  Sin el MVC.

    Hace años no uso webforms, así que le puedo decir que puede agregar código JavaScript que haga lo que desea.  Lo que no recuerdo es si hay que hacer algo especial para que no interfiera con el postback.  Hmmm, pero si quiere algo como lo que busca, tal vez su botón no debería hacer postback.  Y si no debería hacer postback, tal vez su botón no debería ser un botón de servidor.

    Entonces concluyo que lo mejor para usted es usar un botón HTML común y corriente.

    <button type="button" id="elBotonAceptar">Aceptar</button>

    Ese botón por sí solo no hace nada.  Asumiré que utiliza jQuery.  Entonces con jQuery podemos programar lo que hará en clic:

    $(function() {
        var btnAceptar = $('#elBotonAceptar');
        btnAceptar.click(function() {
            btnAceptar.text('Cargando...');
            btnAceptar.prop('disabled', true);
            //Aquí hacemos lo que se que se hace, típicamente una llamada AJAX.
            ...
        });
    });


    Jose R. MCP
    Code Samples

    jueves, 12 de abril de 2018 17:07
    Moderador
  • Gracias por responder pero asi no me funciona porque mi botón debe ejecutar cierto código desde behindcode c#
    jueves, 12 de abril de 2018 18:04
  • Es que si va a hacer algo en code behind, el "Cargando..." no se verá mucho tiempo.

    Pero bueno.  Si tiene que ser botón de servidor, use OnClientClick.

    <asp:Button ID="elBotonAceptar" runat="server" OnClientClick="Aceptando('<%= elBotonAceptar.ClientID %>');" Text="ACEPTAR" />
    <script language="javascript" type="text/javascript">
    function Aceptando(btnId) {
        var btnAceptar = $('#' + btnId);
        btnAceptar.text('Cargando...');
        btnAceptar.prop('disabled', true);
    }
    </script>


    Jose R. MCP
    Code Samples

    jueves, 12 de abril de 2018 18:17
    Moderador
  • Es que si va a hacer algo en code behind, el "Cargando..." no se verá mucho tiempo.

    Pero bueno.  Si tiene que ser botón de servidor, use OnClientClick.

    <asp:Button ID="elBotonAceptar" runat="server" OnClientClick="Aceptando('<%= elBotonAceptar.ClientID %>');" Text="ACEPTAR" />
    <script language="javascript" type="text/javascript">
    function Aceptando(btnId) {
        var btnAceptar = $('#' + btnId);
        btnAceptar.text('Cargando...');
        btnAceptar.prop('disabled', true);
    }
    </script>


    Jose R. MCP
    Code Samples

    Gracias por responder pero en el navegador no me reconoce esta linea 
    '<%= elBotonAceptar.ClientID %>'
    jueves, 12 de abril de 2018 18:26
  • Hmm, podría ser que necesite el tag de data binding.  También nótese que usted debe de usar el ID que le dio a su botón.  Ese "elBotonAceptar" es el ID que YO le di al botón que puse de ejemplo.  Asegúrese de usar el ID correcto.

    Si con el ID verificado no le reconoce, trate con:

    '<%# elBotonAceptar.ClientID %>'


    Jose R. MCP
    Code Samples

    jueves, 12 de abril de 2018 18:40
    Moderador