Désactiver le bouton d'envoi lors de l'envoi du formulaire

Question

J'ai écrit ce code pour désactiver les boutons de soumission sur mon site Web après le clic :

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

Malheureusement, il n'envoie pas le formulaire. Comment puis-je résoudre ce problème ?

EDIT J'aimerais lier la soumission, pas le formulaire :)

Answer 1

Faites-le. onSubmit() :

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Ce qui se passe, c'est que vous désactivez complètement le bouton avant qu'il ne déclenche l'événement submit.

Vous devriez probablement aussi penser à nommer vos éléments avec des ID ou des CLASSes, afin de ne pas sélectionner toutes les entrées de type submit sur la page.

Démonstration : http://jsfiddle.net/userdude/2hgnZ/

(Note, j'utilise preventDefault() y return false pour que le formulaire ne soit pas réellement soumis dans l'exemple ; laissez cette option désactivée dans votre utilisation).

Answer 2

Plus précisément, si quelqu'un est confronté à un problème dans Chrome :

Pour remédier à ce problème, vous devez utiliser la fonction onSubmit dans le <form> pour définir le bouton d'envoi disabled . Cela permettra à Chrome de désactiver le bouton immédiatement après qu'il ait été pressé et la soumission du formulaire se fera quand même...

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Answer 3

Les contrôles désactivés ne soumettent pas leurs valeurs ce qui ne permet pas de savoir si l'utilisateur a cliqué sur enregistrer ou supprimer.

Je stocke donc la valeur du bouton dans un fichier caché qui est soumis. Le nom du caché est le même que celui du bouton. J'appelle tous mes boutons par le nom de button .

Par exemple <button type="submit" name="button" value="save">Save</button>

Sur cette base, j'ai trouvé aquí . Il suffit de stocker le bouton cliqué dans une variable.

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Voici mon IsNull fonction. Utilisez ou substituez votre propre version pour IsNull ou undefined etc.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Answer 4

Cela devrait être pris en compte dans votre application.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Answer 5

Comment désactiver le bouton d'envoi

il suffit d'appeler une fonction sur l'événement onclick et... de retourner true pour soumettre et false pour désactiver la soumission. OU appeler une fonction sur window.onload comme :

window.onload = init();

et dans init() faire quelque chose comme ceci :

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do