web-dev-qa-db-fra.com

Bouton de désactivation après soumission avec jQuery

Je sais qu'il y a beaucoup de questions à ce sujet, mais j'ai essayé plusieurs solutions et rien ne marche.

Dans mon application Django, j'ai un formulaire:

<form method='post'>
    <button type='submit'>Send</button>
</form>

Je ne veux pas désactiver le bouton une fois que l'utilisateur a soumis le formulaire. En utilisant d'autres questions, j'ai essayé plusieurs choses, comme:

<button type='submit' onclick="this.disabled=true">Send</button>

Lorsque je clique, le bouton est désactivé ... mais le formulaire n'est pas soumis. Et pour chaque essai, j'ai eu le même problème: le bouton est désactivé ou le formulaire est envoyé. Je ne trouve pas comment faire les deux ...

J'utilise Chrome. Une idée sur pourquoi j'ai ce problème? Merci de votre aide.

javascriptjquerydjango
32
Juliette Dupuis

Essaye ça:

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});
74
Johann

J'aime ça, ne pas avoir à parcourir le DOM . Mettre la fonction sur une fonction setTimeout, cela permet de soumettre le bouton et après le bouton de désactivation, même si setTimeout est à 0

$(document).ready(function () {
$("#btnSubmit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $("#btnSubmit").prop('disabled', true);
}
});
13
Crying Freeman

Vous pouvez le désactiver lors de l'événement submit du formulaire parent:

$("form").on("submit", function () {
    $(this).find(":submit").prop("disabled", true);
});

Veillez à exécuter ce code uniquement après le chargement de la HTMLFormElement, faute de quoi rien ne lui sera lié. Pour vous assurer que la liaison a lieu, lancez-la dans un bloc document-ready:

// When the document is ready, call setup
$(document).ready(setup);

function setup () {
    $("form").on("submit", function () {
        $(this).find(":submit").prop("disabled", true);
    });
}
5
Sampson

Quelque chose comme ça pourrait marcher.

<button id="btnSubmit" type='submit'> Send </button>

<script>
     $("#btnSubmit").on("click", function(e){
          e.PreventDefault();
          $(this).closest("form")[0].submit();
          $(this).prop('disabled',true)
     });
</script>
3
Gaz Winter

Essayez, comme ça,

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
2
Adem Öztaş

Que dis-tu de ça?

onclick="this.style.visibility='hidden';"

Je dirais, au lieu de désactivé, cachez-le.

Si vous voulez aller avec disabled

onclick="this.style.disabled='true';"
1
Fahim Parkar

ma variante, bouton de désactivation, pas de désactivation directe mais uniquement de la vidable cachée:

<input type="submit" name="namebutton" value="Nahrát obrázek"  onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
1
geniv

Si vous ne voulez pas qu'un élément soit double-cliqué, utilisez .one ()

<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
 });
});

.un()

0
Prince J Painadath

Vous pouvez faire quelque chose comme ça. C'est bon pour moi.

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

Double-cliquez sur votre bouton. Ce code fonctionnera

0
Đoàn Anh Tú

J'aime mieux ça:

<script>
    var submit = false;
    $('form').submit(function () {
        if (submit) { return false; }
        else { submit = true;}
    });
</script>

de cette façon, il empêche également la touche Entrée de soumettre plusieurs fois.

0
Cenas

Vous devez empêcher le formulaire d'être soumis plus d'une fois. Désactiver le bouton n'est pas la bonne solution car le formulaire pourrait être soumis d'une autre manière.

JavaScript:

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

Une fois que le formulaire est correctement désactivé, vous pouvez personnaliser son apparence.

CSS:

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}
0
Fabio Caccamo

J'utilise Chrome. Une idée sur pourquoi j'ai ce problème?

Eh bien, la première fois que j'ai eu affaire à ça, je l'ai résolu comme ceci:

function blockButtons() {
   $('button:submit').click(function(){
    $('button:submit').attr("disabled", true);
   });
}

Cela a parfaitement fonctionné, mais dans Mozilla Firefox. Google Chrome ne l'a pas envoyé. Je l'ai donc remplacé par ceci:

function blockButtons() {
   $('button:submit').click(function(){
      var form = $(this).parents('form:first');
    $('button:submit').attr("disabled", true);
    $('button:submit').css('opacity', 0.5);
    form.submit();
   });
}

Cela fonctionnait à la fois dans Mozilla Firefox, cependant, après que certains de nos utilisateurs utilisant les anciennes versions de IE eurent du mal à recevoir deux soumissions. C’est-à-dire celui initié par le javascript, et celui par navigateur ignorant le fait d’onclick et se contentant de soumettre de toute façon. Cela peut être corrigé par e.preventDefault, je suppose.

0
SPIRiT_1984

Vous pouvez faire quelque chose comme ça. C'est bon pour moi. 

<form method='post' onSubmit='disableFunction()'>
// your code here
</form>

Puis dans le script, ajoutez ceci

<script>
function disableFunction() {
    $('#btn_submit').prop('disabled', true);
}
</script>
0
JunieL

Vous avez un problème sur Chrome, le formulaire n'a pas été envoyé. Essayé un tas de code différent, c'est ce qui a fonctionné le mieux pour moi (et semble le meilleur imo):

  $('#form_id').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

Remplacez form_id par l'id de votre formulaire. Les cours fonctionnent aussi bien sûr: $('.form_class')

Source: JavaScript Coder

0
Rani Kheir