0

Me gustaría deshabilitar un botón después de pulsar sobre él. Actualmente lo hice así.

<body>    
    <form>
        <input type="submit" name="btnEnviar" value="Enviar" onclick="confirmEnviar"/>
    </form>
</body>
<script>
    function confirmEnviar() {
        miformulario.btnEnviar.disabled = true; 
        miformulario.btnEnviar.type = "hidden";
    }

    miformulario.btnEnviar.addEventListener("click", function(){ 
        return confirmEnviar();
    }, false);
</script>

Este código lo obtuve de internet pero me gustaría que estuviera en 1 sola función y que se desactivara por onclick y no por el consecutivo miformulario.btnenviar

4
  • De lo último que escribiste, ¿quieres que se active o desactive?
    – user128299
    Commented el 4 feb. 2021 a las 1:06
  • Que se desactive, pero que la funcion se active por medio de onclick Commented el 4 feb. 2021 a las 1:08
  • Buenas noches. Te sirve que en vez de ser un input sea un button
    – DABL03
    Commented el 4 feb. 2021 a las 4:11
  • Al hacer un submit de un form, carga otra página (en este caso recarga la misma), de manera que se reinicia ignorando cualquier cambio que hayas hecho. Para hacer lo que creo que pretendes, no uses un submit, y envía los datos usando XMLHttpRequest. Commented el 4 feb. 2021 a las 12:15

2 respuestas 2

0

Lo que te pasa es que tienes fallo de lógica, lo que te recomiendo es que uses JQuery que es un "framework" bastante fácil de usar y mas rápido te dejo el código modificado por mi con jQuery que va solo te hara falta meter en el script el link hacia jQuery esto en el head, quedaría algo de esta forma:

     <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>
</head>




<body>
    <form>
        <input type="submit" name="btnEnviar" value="Enviar" id="boton"/>
    </form>
    <script>
        $(document).ready(function(){
            $("#boton").click(function(event){
                event.preventDefault();
            $("#boton").prop('disabled',true)
            
            return false;
            })
        })
    </script>
</body>

Lo que hago con jQuery es lo siguientes: $(document).ready(function(){}) Es esperar a que la pagina cargue entera para ya poder trabajar con ella des de JavaScript con el frameWork de Jquey. Una vez cargada la pagina lo que hago es escuchar sobre el boton con la id boton de la siguiente forma $("#boton").click(function(){ //Aqui lo que quieras que haga cuando hace click}), una vez que el usuario haga click yo lo que hago es desactivarlo con .prop() sobre el botón y también hago un .preventDefault() ya que es un botón de formulario y no quiero que me recargue la pagina. Si lo entiendes contacta conmigo.

1
  • Recomendar usar la enorme sobrecarga de un marco de trabajo como jQuery para una tarea trivial es, literalmente, matar moscas a cañonazos. Commented el 13 feb. 2023 a las 7:24
0

Si no he entendido mal lo que quieres hacer creo que el código de abajo hace lo que deseas.

<body>
    <form>
        <input type="submit" name="btnEnviar" value="Enviar" onclick="this.disabled = true"/>
    </form>
</body>

Por otro lado, es buena práctica separar la estructura de la página (HTML) de la lógica (JS), por lo que te recomiendo que separes tu HTML de tu JS. El código que sigue sería un ejemplo de cómo hacerlo.

function clickEnviar(boton) {
  boton.disabled = true; 
}
<body>
    <form>
        <input type="submit" name="btnEnviar" value="Enviar" onclick="clickEnviar(this)"/>
    </form>
</body>

5
  • Nunca pongas onclcik en html negrita**<input type="submit" name="btnEnviar" value="Enviar" onclick="this.disabled = true"/> **negrita queda muy feo, simpre hazlo en el script y luego en el script lo que tienes que hacer es recoger el boto por su id y que cuando haga click pues se desactive el botón y que también no recargue la pagina ya que es un foro si pone mi código ves que funciona
    – Moha MBS
    Commented el 4 feb. 2021 a las 14:30
  • @MohaMBS estoy totalmente de acuerdo. Yo no lo haría así. Pero en la pregunta dice "que se desactivara por onclick", y lo que you entiendo de eso es lo que he puesto en mi primer código. A mi no me gusta, tampoco me convence el segundo, pero es más sencillo que coger el ID y luego ponerle el callback, y parece que es más parecido a lo que buscaba en la pregunta.
    – ArianJM
    Commented el 5 feb. 2021 a las 11:13
  • A que te refieres, no entiendo muy bien lo que dice yo siempre he usado esa sintaxis, si me explicas de otra forma te podré ayudar
    – Moha MBS
    Commented el 5 feb. 2021 a las 11:43
  • Lo que yo entendí de la pregunta (aunque no me quedó claro), es que quería desactivar el button en el onclick, así que en el primer fragmento de código le dije cómo sería eso (onclick="this.disabled = true"). A mi no me gusta, le di la alternativa en el segundo fragmento, aunque yo iría más allá como indicas tu de coger el ID del elemento y añadirle la función al evento "click". Pero lo dejé así porque creo que es más familiar para el que preguntó.
    – ArianJM
    Commented el 5 feb. 2021 a las 11:54
  • Si lo entiendo pero también puede hacer un JavaScript a parte y llamarlo y quedara mas limpio, pero por lo que veo lo quieres en JavaScript. Pero como al final vi que estabas usando una función pues vi mas sencillo llamarlo por su id y deshabilitar el botón
    – Moha MBS
    Commented el 5 feb. 2021 a las 15:32

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.