jQuery - Annuler la soumission du formulaire (en utilisant "return false"?)?
J'ai quelques problèmes en essayant d'annuler l'envoi d'un formulaire. J'ai suivi ce didacticiel (même si je ne crée pas de script de connexion) et il semble fonctionner pour lui.
Voici mon formulaire:
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
Et voici le jquery:
$(document).ready(function() {
$('form[name=pForm]').submit(function(){
return false;
});
});
J'ai déjà importé jQuery dans l'en-tête et je sais que cela fonctionne. Ma première pensée a été que cela pourrait être dépassé, mais c'est en fait "juste" il y a un an.
Alors, est-ce que quelqu'un voit ce qui ne va pas?
Merci d'avance.
EDIT: D'après ce que j'ai lu, le moyen le plus simple et le plus approprié d'annuler l'envoi est de retourner false ? Mais je n'arrive pas à le faire fonctionner. J'ai effectué des recherches sur le forum et j'ai trouvé plusieurs discussions utiles, mais aucune d'entre elles ne fonctionne réellement. Je dois bousiller quelque chose.
Essayez d’utiliser event.preventDefault
$(document).ready(function(event) {
$('form[name=pForm]').submit(function(event){
event.preventDefault();
//add stuff here
});
});
Merci pour la réponse tout le monde! Un de mes amis m'a conseillé d'ajouter
onsubmit="return(false)
sur le formulaire. Cela fonctionne, mais j'aimerais quand même connaître un truc qui ne fonctionne pas en javascript.
Vous indiquez que "l'alerte avant le" retour faux "ne s'affiche pas".
Lors de l'utilisation de jQuery, l'id ou le nom de l'élément submit ne peut pas être 'submit' - s'il l'est, l'événement submit ne sera pas déclenché.
Le formulaire auquel vous essayez d'accéder peut être ajouté dynamiquement à votre page. Vous devez utiliser delegate pour accéder à ce formulaire dans ce cas.
Exemple:
$(document).delegate("#myform","submit",function(){
return false;
});
Juste mon humble contribution à cette question (sans réponse, datée aussi). J'ai déjà abordé ce problème plusieurs fois avec toujours la même solution:
Ne pas utiliser
<input name="submit" />
de même que
$('form').submit(function(){...});
Cela déclenche le mauvais élément/élément sans erreurs ni avertissements. Il suffit donc de nommer votre bouton de soumission avec un autre nom et tout commence à nouveau par magie.
J'ai aussi eu ce problème, mon code (qui ne fonctionnait pas) ressemblait à ceci:
$('#upload_form').submit(function(){ before_submit('argument') });
et dans la fonction "before_submit", j'avais "return false" pour empêcher le formulaire de soumettre:
function before_submit() {
.........................................................
return false;
}
Je mets "retour" lors de la liaison de la fonction de gestionnaire d'événements au formulaire et cela a fonctionné:
$('#upload_form').submit(function(){ return before_submit('argument') });
La fonction attachée à l'événement submit doit renvoyer false (dans mon cas, la fonction anonyme). Donc ... c'est une solution à l'une des causes de ce problème
Cela devrait bien fonctionner. Il y a probablement plus à la matière. Malheureusement, le code de votre question ne se trouve pas dans une saveur SSCCE , il est donc difficile de cerner la cause. Vous n'avez probablement pas du tout importé de bibliothèque jQuery. Ou vous avez appelé $(document).ready() before importing jQuery library. Ou vous avez une autre bibliothèque JS qui est en conflit avec $(). Ou la forme actuelle n'a pas le nom souhaité. Etc..
Pour vous aider à démarrer, voici un SSCCE digne de ce nom. Tout ce que vous avez à faire est de le copier/coller.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3569072</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('form[name=pForm]').submit(function() {
alert('Submit blocked!');
return false;
});
});
</script>
</head>
<body>
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
</body>
</html>
Si cela fonctionne (au moins, cela fonctionne ici, je reçois une alerte et le formulaire n'est pas soumis du tout), comparez-le avec votre propre code et essayez de réduire votre propre code dans cette version afin de mieux repérer les différences. (et donc votre erreur).
Quoi qu’il en soit, à mon avis, il vaudra la peine de vous familiariser avec certains tutoriels jQuery (et de préférence également JavaScript) de base/triviaux pour mieux comprendre ce qui se passe sous la couverture et apprendre à utiliser des outils tels que Firebug .
La valeur de name nécessite des guillemets autour d'elle. Essaye ça:
$(document).ready(function() {
$("form[name='pForm']").submit(function(){
return false;
});
});
J'ai eu le même problème et il était question d'utiliser Rails et :remote => true sur le formulaire. Le pilote jQuery de Rails arrivait et soumettait le formulaire par ajax alors que ma propre fonction tentait de bloquer le processus de soumission à l'aide de return false et de event.preventDefault().
Alors recherchez les frameworks et les actions par défaut qui interfèrent avec votre propre javascript. return false devrait fonctionner :)
Vous devez faire une sorte de «double retour» ou, en d'autres termes, vous devez renvoyer ce qui est retourné. Donc, vous avez votre code HTML:
<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
Alors vous avez juste une fonction jquery appelée onsubmit comme vous voyez ci-dessus:
function cancelSubmit() {
return false; // return true if you want submission to carry through
}
Vous pouvez mettre n'importe quel type de condition dans la fonction ci-dessus. Il semble que vous souhaitiez simplement l’annuler. J'espère que cela aidera les autres à trouver cette réponse.
J'ai rencontré des problèmes similaires. Je les ai résolus en supprimant l'action et la méthode du formulaire avant validation, puis en les rajoutant après validation. Voici le validateur que j'ai écrit:
var Validator = function (formSelector) {
this.formSelector = formSelector;
// $(formSelector).submit(function() {return false;});
this.Action = $(formSelector).attr("action");
this.Method = $(formSelector).attr("method");
$(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});
var donotsubmit = false;
var notjustcheckbox = false;
var checknotchecked = false;
this.Required = new Array();
this.Email = new Array();
this.validate = function () {
this.form = $(this.formSelector);
var i = 0;
for (i in this.Required){
$(this.Required[i]).attr("value", function(index,attr){
// Check on checkboxes...
if (this.getAttribute("type") == "checkbox"){
if (this.checked == false){
checknotchecked = true;
donotsubmit = true;
} else {
}
} else {
if (attr == "" || attr == undefined){
this.style.border = "1px solid red";
notjustcheckbox = true;
donotsubmit = true;
} else {
this.style.border = "1px solid green";
}
}
});
}
i = 0;
for (i in this.Email){
$(this.Email[i]).attr("value", function(index,email){
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
if (filter.test(email) == true || filter.test(email) == "true") {
this.style.border = "1px solid green";
} else if (filter.test(email) == false) {
donotsubmit = true;
notjustcheckbox = true;
this.style.border = "1px solid red";
}
});
}
if (donotsubmit == true){
if (checknotchecked == true && notjustcheckbox == true){
alert("Please correct the fields in red and check the required checkboxes");
} else if (checknotchecked == true && notjustcheckbox == false){
alert("Please check the required checkboxes");
} else {
alert("Please correct the fields in red");
}
checknotchecked = false;
notjustcheckbox = false;
donotsubmit = false;
} else {
$(formSelector).attr({action : ''+this.Action+''});
$(formSelector).attr({method : ''+this.Method+''});
$(formSelector).submit();
}
return true;
};
};
Vous pouvez l'implémenter comme ceci:
$(document).ready(function(){
var myForm = new Validator("#formId");
myForm.Required = new Array("input.lightborder");
myForm.Email = new Array("#email");
$("#form-submit-button-id").click(function(){
myForm.validate();
});
});
Vous pouvez ajouter des sélecteurs CSS pour les champs obligatoires. Celui pour Email doit être unique.