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.
Essaye ça:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
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);
}
});
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);
});
}
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>
Essayez, comme ça,
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
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';"
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';"/>
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
});
});
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
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.
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;
}
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.
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>
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