jQuery désactiver le bouton Soumettre sur la soumission du formulaire

j'ai vu quelques façons de le faire:

• désactiver les boutons en cliquant sur
• désactiver les boutons sur soumettre
• Désactiver le formulaire sur submit

mais aucun ne semble fonctionner comme prévu, donc j'ai fait ma propre méthode.

Ajouter une classe à votre formulaire appelé submit-once et utiliser les jQuery:

$('form.submit-once').submit(function(e){
  if( $(this).hasClass('form-submitted') ){
    e.preventDefault();
    return;
  }
  $(this).addClass('form-submitted');
});

Cela ajoute une autre classe à votre formulaire: form-submitted. Ensuite, si vous essayez de soumettre le formulaire à nouveau et il a cette classe, jQuery empêchera le formulaire de soumettre et de quitter la fonction à return; et donc, rien n'est soumis de nouveau.

j'ai choisi d'utiliser $('form.submit-once') au lieu de $('form') parce que certains de mes formulaires utilisent Ajax qui devrait être en mesure de soumettre plusieurs fois.

Vous pouvez le tester sur ce jsFiddle. J'ai ajouté target="_blank" au formulaire pour que vous puissiez tester la soumission du formulaire plusieurs fois.

Side note: vous pouvez envisager des utilisateurs non-JS en prévenant également double présentations côté serveur. Par exemple, avoir une variable session qui stocke la date/heure de la dernière soumission, et ignorer toute autre soumission dans les 3 secondes.

Il n'y a pas de raison que votre code ne devrait pas fonctionner. Lors de la soumission du formulaire, le bouton "soumettre" est désactivé. J'ai vérifié les en-têtes transmis à JSFiddle dans la démo, et le champ de formulaire est effectivement envoyé (testé dans IE et Chrome):

POST http://fiddle.jshell.net/josh3736/YnnGj/show/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://fiddle.jshell.net/josh3736/YnnGj/show/
Accept-Language: en-US,en;q=0.7,es;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: fiddle.jshell.net
Content-Length: 9
Connection: Keep-Alive
Pragma: no-cache

test=It+works

Vos prochaines étapes devraient être:

• utilisez quelque chose qui vous permet d'inspecter le trafic HTTP (mon préféré est Fiddler) pour voir si vos champs de formulaire sont envoyées à l' serveur. Si elles le sont, c'est évidemment un problème sur votre serveur.
• si les champs du formulaire ne sont pas envoyés, il se passe autre chose dans votre page. Publier plus de votre code afin que nous puissions voir exactement ce qui se passe.

Ce que j'ai fini par utiliser, qui fonctionne dans Chrome 53:

$('input[type=submit]').addClass('submit-once').click(function(e){
    if($(this).hasClass('form-submitted') ){
        e.preventDefault();
        return;
    }
    $(this).addClass('form-submitted');
});

Ce qui a fonctionné pour moi....

$('body').bind('pagecreate', function() {
    $("#signin-btn").bind('click', function() {
        $(this).button('disable');
        showProgress(); // The jquery spinny graphic
        $('form').submit();
    });
});

si vous avez besoin d'ajouter un bouton, il y a toujours l'étiquette qui peut aider. Si vous ne voulez pas que le bouton Soumettre à soumettre, la meilleure façon est de ne pas ajouter un bouton Soumettre.

une solution générique, pour toutes les entrées, boutons et liens, en utilisant une icône de chargement d'image, est:

$(function(){
    $(document).on('click', 'input[type=submit], button[type=submit], a.submit, button.submit', function() {

        // Preserves element width
        var w = $(this).outerWidth();
        $(this).css('width', w+'px');

        // Replaces "input" text with "Wait..."
        if ($(this).is('input'))
            $(this).val('Wait...');

        // Replaces "button" and "a" html with a
        // loading image.
        else if ($(this).is('button') || $(this).is('a'))
            $(this).html('<img style="width: 16px; height: 16px;" src="path/to/loading/image.gif"></img>');            

        // Disables the element.
        $(this).attr('disabled', 'disabled');    

        // If the element IS NOT a link, submits the
        // enclosing form.
        if (!$(this).is('a'))    
            if ($(this).parents('form').length)
                $(this).parents('form')[0].submit();

        return true;
    })

});

pour les liens, vous devez ajouter la classe "submit".

votre code est correct. J'ai rencontré ce même problème mais pour moi le problème était dans le php, pas javascript. Lorsque vous désactivez le bouton, il n'est plus envoyé avec le formulaire et mon php comptait sur le bouton Soumettre

if(isset($_POST['submit'])){
   ...
}

donc la page se rafraîchit mais php ne s'exécute pas. J'utilise maintenant un champ différent qui a required l'attribut.