javascript - que - innerhtml

Desactivando el botón después de hacer clic

Question

Necesito desactivar un botón una vez que se hace clic para que el usuario no pueda hacer clic en él más de una vez. (Mi aplicación está escrita en MVC ASP.NET, he hecho esto en una aplicación ASP.NET normal).

Intenté usar JavaScript y jQuery y no está funcionando. El botón se desactiva pero el formulario no se envía.

jQuery:

$("#ClickMe").attr("disabled", "disabled"); 

JavaScript:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = ''true'';
}

Ambos métodos funcionan muy bien, pero ahora el formulario no se enviará.

Answer 1

¡Usa eventos Js modernos, con "una vez"!

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Documentation , CanIUse

Answer 2

Para deshabilitar un botón de enviar, solo necesita agregar un atributo deshabilitado al botón de enviar.

$("#btnSubmit").attr("disabled", true);

Para habilitar un botón deshabilitado, establezca el atributo deshabilitado en falso o elimine el atributo deshabilitado.

$(''#btnSubmit'').attr("disabled", false);

o

$(''#btnSubmit'').removeAttr("disabled");

Answer 3

Para enviar el formulario en MVC NET Core, puede enviarlo usando INPUT :

<input type="submit" value="Add This Form">

Para que sea un botón, estoy usando Bootstrap, por ejemplo:

<input type="submit" value="Add This Form" class="btn btn-primary">

Para evitar el envío de formularios duplicados en MVC NET Core, puede agregar el evento onclick y usar this.disabled = true; para deshabilitar el botón:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

Si quiere verificar primero si el formulario es válido y luego deshabilitar el botón, agregue this.form.submit (); primero, de modo que si el formulario es válido, este botón se desactivará, de lo contrario, el botón seguirá habilitado para permitirle corregir su formulario una vez validado.

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

Puede agregar texto al botón deshabilitado diciendo que ya está en el proceso de enviar formulario, cuando toda la validación es correcta usando this.value = ''text''; :

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = ''Submitting the form'';">

Answer 4

Si cuando configuras disabled = "disabled" inmediatamente después de que el usuario hace clic en el botón, y el formulario no se envía debido a eso, puedes probar dos cosas:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled  

Aunque honestamente apuesto que habrá una mejor manera de hacer esto, que eso.

Answer 5

jQuery .one() no se debe usar con el evento click sino con el evento submit como se describe a continuación.

 $(''input[type=submit]'').one(''submit'', function() {
     $(this).attr(''disabled'',''disabled'');
 });

Answer 6

jQuery ahora tiene la función .one() que limita cualquier evento dado (como "enviar") a una ocurrencia.

Ejemplo:

$(''#myForm'').one(''submit'', function() {
    $(this).find(''input[type="submit"]'').attr(''disabled'',''disabled'');
});

Este código le permitirá enviar el formulario una vez, luego deshabilitarlo. Cambia el selector en la función find () al botón que desees desactivar.

Nota: Por Francisco Goldenstein, he cambiado el selector a la forma y el tipo de evento para enviar. Esto le permite enviar el formulario desde cualquier lugar (lugares que no sean el botón) mientras deshabilita el botón al enviar.

Nota 2: por gorelog, usando attr(''disabled'',''disabled'') impedirá que su formulario envíe el valor del botón de envío. Si desea pasar el valor del botón, utilice attr(''onclick'',''this.style.opacity = "0.6"; return false;'') lugar.

Answer 7

pensar simple

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

si quieres correr una vez :)

Answer 8

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

selecciona el botón y por su ID o texto o clase ... simplemente deshabilita después del primer clic y habilita después de 20 Milli sec

Funciona muy bien para respaldos de publicaciones n lo coloca en la página maestra, se aplica a todos los botones sin llamar implícitamente como onclientClick

Answer 9

protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }