Comment empêcher le formulaire de soumettre plusieurs fois du côté client?
Parfois, lorsque la réponse est lente, il est possible de cliquer plusieurs fois sur le bouton d'envoi.
Comment empêcher cela?
Utilisez du javascript discret pour désactiver l'événement de soumission sur le formulaire une fois qu'il a déjà été soumis. Voici un exemple utilisant jQuery.
EDIT: Correction du problème avec l'envoi d'un formulaire sans cliquer sur le bouton d'envoi. Merci, ichiban.
$("body").on("submit", "form", function() {
$(this).submit(function() {
return false;
});
return true;
});
J'ai essayé la solution de vanstee ainsi que la validation discrète asp mvc 3, et si la validation du client échoue, le code est toujours exécuté et la soumission du formulaire est désactivée définitivement. Je ne suis pas en mesure de soumettre à nouveau après avoir corrigé les champs. (voir le commentaire de bjan)
J'ai donc modifié le script de vanstee comme ceci:
$("form").submit(function () {
if ($(this).valid()) {
$(this).submit(function () {
return false;
});
return true;
}
else {
return false;
}
});
Le contrôle de soumission de formulaire côté client peut être réalisé de manière assez élégante en demandant au gestionnaire onsubmit de masquer le bouton d'envoi et de le remplacer par une animation de chargement. De cette façon, l'utilisateur obtient un retour visuel immédiat au même endroit où son action (le clic) s'est passé. En même temps, vous empêchez le formulaire d'être soumis une autre fois.
Si vous soumettez le formulaire via XHR, n'oubliez pas que vous devez également gérer les erreurs de soumission, par exemple un délai d'attente. Vous devrez à nouveau afficher le bouton d'envoi car l'utilisateur doit renvoyer le formulaire.
Sur une autre note, llimllib soulève un point très valable. Tous la validation du formulaire doit avoir lieu côté serveur. Cela inclut plusieurs vérifications de soumission. Ne faites jamais confiance au client! Ce n'est pas seulement un cas si javascript est désactivé. N'oubliez pas que tout le code côté client peut être modifié. C'est un peu difficile à imaginer, mais le langage HTML/JavaScript qui parle à votre serveur n'est pas nécessairement le code HTML/JavaScript que vous avez écrit.
Comme suggéré par llimllib, générez le formulaire avec un identificateur unique pour ce formulaire et insérez-le dans un champ de saisie masqué. Stockez cet identifiant. Lors de la réception des données de formulaire, ne les traitez que lorsque l'identifiant correspond. (Liez également l'identifiant à la session de l'utilisateur et faites-le correspondre, pour une sécurité accrue.) Après le traitement des données, supprimez l'identifiant.
Bien sûr, il est parfois nécessaire de nettoyer les identifiants pour lesquels jamais aucune donnée de formulaire n'a été soumise. Mais très probablement, votre site Web utilise déjà une sorte de mécanisme de "ramassage des ordures".
Voici un moyen simple de faire cela:
<form onsubmit="return checkBeforeSubmit()">
some input:<input type="text">
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var wasSubmitted = false;
function checkBeforeSubmit(){
if(!wasSubmitted) {
wasSubmitted = true;
return wasSubmitted;
}
return false;
}
</script>
<form onsubmit="if(submitted) return false; submitted = true; return true">
Désactivez le bouton d'envoi peu après un clic. Assurez-vous de bien gérer les validations. Conservez également une page intermédiaire pour tous les traitements ou opérations de base de données, puis redirigez-la vers la page suivante. Cela garantit que l'actualisation de la deuxième page ne fait pas un autre traitement.
Hachez l'heure actuelle, faites-en une entrée masquée du formulaire. Sur le serveur, vérifiez le hachage de chaque soumission de formulaire; si vous avez déjà reçu ce hachage, vous devez soumettre une nouvelle soumission.
modifier: faire confiance à javascript n’est pas une bonne idée, vous pouvez donc continuer à voter pour ces idées mais certains utilisateurs ne l’auront pas activé La bonne réponse est de ne pas faire confiance aux entrées utilisateur côté serveur.
En utilisant JQuery, vous pouvez faire:
$('input:submit').click( function() { this.disabled = true } );
Et
$('input:submit').keypress( function(e) {
if (e.which == 13) {
this.disabled = true
}
}
);
Vous pouvez également afficher une barre de progression ou une flèche pour indiquer que le formulaire est en cours de traitement.
Je sais que vous avez marqué votre question avec 'javascript' mais voici une solution qui ne dépend pas du javascript:
C'est un modèle d'application web nommé PRG, et voici un bon article qui le décrit
Vous pouvez empêcher plusieurs soumissions simplement avec:
var Workin = false;
$('form').submit(function()
{
if(Workin) return false;
Workin =true;
// codes here.
// Once you finish turn the Workin variable into false
// to enable the submit event again
Workin = false;
});
La réponse la plus simple à cette question est la suivante: "Parfois, lorsque la réponse est lente, il est possible de cliquer plusieurs fois sur le bouton d'envoi. Comment empêcher cela?"
Il suffit de désactiver le bouton d'envoi de formulaire, comme ci-dessous.
<form ... onsubmit="buttonName.disabled=true; return true;">
<input type="submit" name="buttonName" value="Submit">
</form>
Cela désactivera le bouton d'envoi, au premier clic pour l'envoi. De plus, si vous avez des règles de validation, cela fonctionnera bien. J'espère que ça va aider.
Vous pouvez essayer safeform jquery plugin.
$('#example').safeform({
timeout: 5000, // disable form on 5 sec. after submit
submit: function(event) {
// put here validation and ajax stuff...
// no need to wait for timeout, re-enable the form ASAP
$(this).safeform('complete');
return false;
}
})
Côté client , vous devez désactiver le bouton d'envoi une fois le formulaire soumis avec du code javascript, à l'instar de la méthode fournie par @vanstee et @chaos.
Mais il existe un problème de latence du réseau ou de javascript dans lequel vous ne devez pas compter sur le JS pour empêcher cela.
Ainsi, sur le serveur , vous devriez vérifier la soumission répétée des mêmes clients et omettre celle qui semble répétée, ce qui semble être une tentative fausse de la part de l'utilisateur.
La solution la plus simple et élégante pour moi:
function checkForm(form) // Submit button clicked
{
form.myButton.disabled = true;
form.myButton.value = "Please wait...";
return true;
}
<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>
Juste pour ajouter aux réponses possibles sans contourner la validation des entrées du navigateur
$( document ).ready(function() {
$('.btn-submit').on('click', function() {
if(this.form.checkValidity()) {
$(this).attr("disabled", "disabled");
$(this).val("Submitting...");
this.form.submit();
}
});
});
La plupart des solutions simples consistent à désactiver le bouton au clic, à l'activer une fois l'opération terminée. Pour vérifier une solution similaire sur jsfiddle:
[click here][1]
Et vous pouvez trouver une autre solution sur ce réponse .
Utilisez ce code dans votre formulaire.Il gérera plusieurs clics.
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
cela fonctionnera à coup sûr.
Cela permet de soumettre toutes les 2 secondes. En cas de validation frontale.
$(document).ready(function() {
$('form[debounce]').submit(function(e) {
const submiting = !!$(this).data('submiting');
if(!submiting) {
$(this).data('submiting', true);
setTimeout(() => {
$(this).data('submiting', false);
}, 2000);
return true;
}
e.preventDefault();
return false;
});
})
Faire cela en utilisant javascript est un peu facile. Voici le code qui donnera les fonctionnalités souhaitées:
$('#disable').on('click', function(){
$('#disable').attr("disabled", true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>Une alternative à ce qui était proposé auparavant est:
jQuery('form').submit(function(){
$(this).find(':submit').attr( 'disabled','disabled' );
//the rest of your code
});
le meilleur moyen d’empêcher la soumission multiple est la suivante: __. Il suffit de passer l’identifiant du bouton dans la méthode.
function DisableButton() {
document.getElementById("btnPostJob").disabled = true;
}
window.onbeforeunload = DisableButton;
Cela fonctionne très bien pour moi. Il soumet la batterie et rend le bouton désactivé, puis au bout de 2 secondes, le active.
<button id="submit" type="submit" onclick="submitLimit()">Yes</button>
function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
btn.setAttribute('disabled', 'disabled');
}, 1);
setTimeout(function() {
btn.removeAttribute('disabled');
}, 2000);}
Dans ECMA6 Syntex
function submitLimit() {
submitBtn = document.getElementById('submit');
setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);
setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}