0

En un formulario tengo un botón del que quiero cambiar el color cada vez que el usuario lo pulse. Hice esto, pero al pulsar el botón, el estilo no cambia y sigue como btn-success.

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $('#boton').click(function () {           

            var clase = $('#boton').attr('class');

            if (clase.includes('btn-success')) {                        
                $('#boton').removeClass('btn-success');
                $('#boton').addClass('btn-danger');
            } else {
                $('#boton').removeClass('btn-danger');
                $('#boton').addClass('btn-success');
            }           
        });
    </script>
</head>
<body>
    <main role="main" class="container">
        <div class="starter-template">
            <div id="contenedorfh">
                <div id="fecha"></div>
                <br>
                <div id="hora"></div>
                <form style="text-align: center; margin-top:10%;" name="formulario" method="post" action="">
                    <input style="text-align: center;" type="datetime" name="fechahora" step="1" value="<?php echo date("d/m/Y H:i:s");?>">
                    <br>
                    <br>
                    <input id="boton" type="submit" name="picar" class="btn btn-success" value="Time">
                </form>
            </div>
        </div>
    </main>
</body>

Puede que esté poniendo mal la ubicación de mi código jquery. ¿Alguna ayuda?

2 respuestas 2

2

Mueve el script al final del body y el código javascript funcionará. Pero debes de tener en cuenta que el input si es type="submit" ejecuta el form automáticamente y recargará la página con lo que no verás este cambio. Si le especificas que es un type="button" no tendrás este problema y después gestionas el formulario dentro del evento click. Quedaría algo así:

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <main role="main" class="container">
        <div class="starter-template">
            <div id="contenedorfh">
                <div id="fecha"></div>
                <br>
                <div id="hora"></div>
                <form style="text-align: center; margin-top:10%;" name="formulario" method="post" action="">
                    <input style="text-align: center;" type="datetime" name="fechahora" step="1" value="<?php echo date("d/m/Y H:i:s");?>">
                    <br>
                    <br>
                    <input id="boton" type="button" name="picar" class="btn btn-success" value="Time">
                </form>
            </div>
        </div>
    </main>
    <script>
        $('#boton').click(function () {           

            var clase = $('#boton').attr('class');

            if (clase.includes('btn-success')) {                        
                $('#boton').removeClass('btn-success');
                $('#boton').addClass('btn-danger');
            } else {
                $('#boton').removeClass('btn-danger');
                $('#boton').addClass('btn-success');
            }           
        });
    </script>
</body>

3
  • Pero yo necesito el botón del formulario como type=submit para poder utilizar php más abajo
    – Maginon
    Commented el 8 may. 2019 a las 10:23
  • En ese caso, el formulario refresca la página con lo que los cambios dinámicos que hagas mediante javascript no se te mantendrán al volver a cargar la página. La opción que puedes implementar es que la clase sea estática mediante una variable PHP. Entonces cada vez que el se envíe el formulario sea tu código PHP el que decida que clase se imprimirá.
    – Eric RF
    Commented el 8 may. 2019 a las 10:27
  • Vale! Perfecto entonces! Le echaré un vistazo! Me ha sido de gran ayuda!
    – Maginon
    Commented el 8 may. 2019 a las 10:40
1

tienes dos pequeños problemas en el código:

$(document).ready(function () {
            $('#boton').click(function (event) {
                event.preventDefault();
                var clase = $('#boton').attr('class');
                if (clase.includes('btn-success')) {
                    $('#boton').removeClass('btn-success');
                    $('#boton').addClass('btn-danger');
                } else {
                    $('#boton').removeClass('btn-danger');
                    $('#boton').addClass('btn-success');
                }
            });
        });
  • Te falta agregar el "$(document).ready(function () {});"
  • Al ser un botón del tipo "submit" dentro de un form te esta recargando el sitio web y no vas a apreciar los cambios, en mi ejemplo de código, a la función del "click" le paso el parámetro event para utilizar "event.preventDefault();" y evitar que se envié el formulario.

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.