web-dev-qa-db-fra.com

jquery désactiver le bouton d'envoi lors de la soumission du formulaire

Pour une raison quelconque, bien que ce code actualise la page, aucun champ n'est posté ...

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

Y at-il une meilleure façon de coder cela?

jqueryformssubmit
24
scarhand

Votre code modifie l'action d'envoi du formulaire. Au lieu de soumettre, cela change l'attribut du bouton.

Essaye ça:

$('input[type=submit]').click(function() {
    $(this).attr('disabled', 'disabled');
    $(this).parents('form').submit();
});
36
Diodeus - James MacFarlane

J'ai vu plusieurs façons de faire ceci:

  • Désactiver les boutons au clic
  • Désactiver les boutons lors de la soumission
  • Désactiver le formulaire lors de l'envoi

Mais aucun ne semble fonctionner comme prévu, alors j'ai créé ma propre méthode.

Ajoutez une classe à votre formulaire appelée submit-once et utilisez le jQuery suivant:

$('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 à nouveau le formulaire et que cette classe a cette classe, jQuery empêchera le formulaire de se soumettre et quittera la fonction à return;. Ainsi, rien ne sera soumis à nouveau.

J'ai choisi d'utiliser $('form.submit-once') au lieu de $('form') car certains de mes formulaires utilisent Ajax, qui devrait pouvoir être soumis plusieurs fois.

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

Remarque secondaire: vous voudrez peut-être prendre en compte les utilisateurs non-JS en empêchant également les doubles soumissions côté serveur. Par exemple, ayez une variable de session qui stocke la dernière date/heure de soumission et ignorez toute nouvelle soumission dans les 3 secondes.

30
rybo111

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');
});
2
SaeX

Il n'y a aucune raison que votre code ne fonctionne pas . Lors de la soumission du formulaire, le bouton d'envoi est désactivé. J'ai vérifié les en-têtes transmis à JSFiddle dans la démo et le champ de formulaire est bien 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 effectivement envoyés au serveur. S'ils le sont, c'est évidemment un problème sur votre serveur.
  • Si les champs de formulaire ne sont pas envoyés, il se passe autre chose dans votre page. Publiez davantage de votre code afin que nous puissions voir exactement ce qui se passe.
2
josh3736

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();
    });
});
1
user2288459

Je ne sais pas pourquoi le code en question ne fonctionne pas. Voici un extrait de code simple et direct et je vous conseille de ne pas trop compliquer les choses.

$("form").submit(function () {
    // prevent duplicate form submissions
    $(this).find(":submit").attr('disabled', 'disabled');
});

Avantages pour moi:

  • cela fonctionne bien avec HTML5 Validation de formulaire ;
  • il est écrit de manière générique pour pouvoir être réutilisé "tel quel".
0
naXa

Si vous devez ajouter un bouton, il y a toujours la balise <input type='button'> qui pourrait vous aider. Si vous ne voulez pas que le bouton d'envoi soit envoyé, le meilleur moyen est de ne pas en ajouter.

0
Bene

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

$(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".

0
Arivan Bastos

Votre code est bon. 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 s'appuyait sur le bouton d'envoi

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

Donc, la page est actualisée mais php ne s'exécute pas. J'utilise maintenant un champ différent qui a l'attribut required.

0
VeeK