J'essaye de désactiver la fonction que je passe à addEventListener lorsque l'utilisateur clique sur soumettre. J'ai mis du code pour empêcher l'utilisateur de quitter la page s'il a entré des données dans l'un des champs. Cela fonctionne très bien. Si l'utilisateur tente de s'éloigner, il reçoit un avertissement comme prévu. Cependant, je n'arrive pas à comprendre comment désactiver cette fonctionnalité une fois que tous les champs sont remplis et que l'utilisateur clique sur Soumettre. Dans l'état actuel des choses, ils sont invités à s'assurer qu'ils veulent quitter le site lorsqu'ils cliquent sur Soumettre et je ne veux pas que cela se produise lorsque l'utilisateur clique sur Soumettre.
J'ai essayé quelque chose comme ci-dessous, pour essayer de dissociez la fonction beforeunload en fonction de la soumission, mais cela ne fonctionne pas. J'ai l'impression que c'est la bonne idée générale, mais j'ai du mal à faire fonctionner ce que je veux.
window.addEventListener('beforeunload', function (event) {
console.log('checking form');
let inputValue = document.querySelector('#myInput').value;
if (inputValue.length > 0) {
console.log(inputValue);
event.returnValue = 'Are you sure you wish to leave?';
}
event.preventDefault();
});
Le code ci-dessous fonctionne comme prévu: p >
$('form').submit(function() {
$(window).unbind('beforeunload');
});
$(window).on('beforeunload',function(){
return '';
});
Si l'utilisateur clique sur Soumettre, je souhaite que la fonction beforeunload soit désactivée essentiellement.
3 Réponses :
Si vous liez un gestionnaire en utilisant .on () , vous pouvez supprimer l'événement lié en utilisant .off()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="http://google.com" method="get"> <input name="a" placeholder="Input 1"> <input name="b" placeholder="Input 2"> <input name="c" placeholder="Input 3"> <button type="submit">Submit</button> </form>
Cependant , Je pense que dans votre scénario, vous n'avez pas vraiment besoin du avant le déchargement si vous gérez la soumission de votre formulaire de manière logique.
J'ai fait une maquette d'un exemple de la façon dont vous pouvez logiquement soumettre le formulaire si un utilisateur choisit de soumettre le formulaire en fonction d'une condition (dans ce cas, si tous les champs ne sont pas remplis).
$('form').on('submit', function (e) {
var inputs = $(':text', this);
console.log(inputs.length)
var validInputs = inputs.filter(function () {
return $(this).val().length;
}).length;
if (validInputs > 0 && validInputs < inputs.length) {
var r = confirm("Are you sure you want to leave?");
if (!r) e.preventDefault()
}
})
$('form').submit(function() {
$(window).off('beforeunload');
});
$(window).on('beforeunload',function(){
return '';
});
Merci pour l'information. Je faisais cela auparavant, mais j'essayais d'être plus précis sur ma forme. Aujourd'hui, si j'utilise ce qui précède, cela fonctionne, mais lorsque l'utilisateur essaie de quitter la page en utilisant un lien, ce qui précède se déclenche également. J'essayais d'être spécifique au champ en utilisant l'addeventlistener, mais maintenant je ne peux pas comprendre comment désactiver chaque eventlistener. S'il y a une meilleure façon de faire ce que j'essaie de faire, je suis également ouvert à cela.
Êtes-vous en train de dire que si, disons que vous avez 5 entrées, un utilisateur a rempli au moins 1 champ mais pas les 5, alors il est invité et donc le formulaire n'est pas soumis?
Si tous les champs sont remplis, cela invite toujours l'utilisateur à cliquer pour s'assurer qu'il souhaite le soumettre. Je ne veux pas que vous soyez sûr d'apparaître lorsque l'utilisateur clique sur Soumettre.
Consultez l'extrait de code que j'ai créé pour vous. Est-ce que cela correspond à ce que vous essayez d'accomplir?
Je teste et il ne semble pas tirer. Le reste de ma fonction est ..
J'utilise des formulaires Django, c'est pourquoi cela ne fonctionnera pas.
Pour inviter l'utilisateur avant de quitter un formulaire:
<form id='form' action='http://httpbin.org/post' method='post' target='response'> <label>Name: </label><input name='Name' type='text' required><br> <label>Cell: </label><input name='Cell' type='tel' required><br> <label>Date: </label><input name='Date' type='date' required><br> <input type="submit"> </form> <iframe src='about:blank' name='response'></iframe>
Voir ce message
Utilisez l'attribut required sur chaque champ et vous n'aurez pas besoin de faire tout cela. La démo suivante refusera toute tentative d'envoi de son formulaire s'il y a un champ vide. Il sera envoyé à un serveur de test en direct et une réponse sera affichée confirmant une soumission réussie.
label {
display: inline-block;
width: 75px
}
[type=submit] {
margin-left: 200px
}
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Merci pour la suggestion. J'essaie d'empêcher l'utilisateur de quitter la page lorsqu'il n'a pas rempli le formulaire et, s'il l'a fait, j'essaie de permettre à la soumission de fonctionner sans invite. Proposez-vous que votre code me permettra d'accomplir cela?
Avez-vous déjà testé cette démo? C'est une véritable forme de fonctionnement pour un serveur de test en direct.
name.widget.attrs ['required'] = 'requis'
Je vous remercie. Oui, j'ai le formulaire configuré pour exiger ces champs. Ce n'est pas mon problème. Le problème est lorsque j'essaie d'empêcher l'utilisateur de quitter la page en utilisant la fonction beforeunload. Je n'arrive pas à trouver comment empêcher le déclenchement d'avant déchargement lorsque l'utilisateur clique sur Soumettre.
Avez-vous testé ma démo? Après une véritable soumission de données, la page est toujours là.
Votre code empêchera-t-il l'utilisateur de quitter une page avant d'avoir fini de remplir le formulaire?
C'est le détournement de la capacité de navigation d'un utilisateur, qui à son tour est une mauvaise UX,
Je souhaite empêcher l'utilisateur de quitter accidentellement la page. Il leur suffit de cliquer sur OK s'ils ont commencé à remplir le formulaire.
Puis-je supprimer l'écouteur d'événement lors de l'envoi du formulaire? $ ('form'). submit (function () {window.removeEventListener ("beforeunload",);}); J'ai essayé ceci, mais ma syntaxe n'est peut-être pas correcte.
@SteveSmith Bien sûr, mais le moyen le plus simple est de t = écouter un envoi puis d'utiliser e.preventDefault () , voir mise à jour,
Merci pour la suggestion. Je vais également explorer cette avenue. Merci pour votre contribution. Je vous en suis reconnaissant.
A pu résoudre ce problème en utilisant la suggestion faite par Bipperty via ce problème SO ... Affiner BeforeUnload To Only Fire si le champ est modifié ou mis à jour . En fin de compte, le code ci-dessous est ce que je désactivais avant le déchargement lors de la soumission du formulaire ....
var submitting = false;
window.addEventListener("beforeunload", function (event) {
console.log('checking form');
let inputValue = document.querySelector('#myInput').value;
if(inputValue.length > 0 && submitting === false) {
console.log(inputValue);
event.returnValue = 'Are you sure you wish to leave?';
}
event.preventDefault();
});
document.addEventListener("submit", function(event) {
submitting = true;
});
Vous ne pouvez pas utiliser
element.removeEventListeneravec des fonctions anonymes. Si vous souhaitez le supprimer à un moment donné, vous devez en faire une fonction qui peut être référencée par son nom@enhzflep Merci pour l'information. Je dois donc écrire une fonction distincte pour removeEventListener?
Si je comprends bien votre question, non. La fonction qui doit gérer l'événement doit avoir un nom. À partir de là, vous disposez des éléments suivants:
element.addEventListener ('eventName', functionName, false);puis plus tard, `element.removeEventListener ('eventName', functionName);