Pour ça, j'ai créer un script javascript "jquery.js", qui ne gère que le champ fabriquant pour le moment : il faut bien que ça fonctionne déjà sur le premier avant de vouloir l'appliquer sur tous ^^.
Mon script commence par désactiver le bouton submit, puis il vérifie si le champ est vide : si oui, il va afficher un message d'erreur. Cette partie du code fonctionne parfaitement :
$(function() {
$('#create').click(function(){
$('input:submit').attr("disabled", true);
$("#check_fabriquant").removeClass().addClass('messagebox').text('Check en cours...').fadeIn("slow");
var valeur = document.getElementById("fabriquant").value;
if (valeur.replace(/\s/g,"")=="") {
$("#check_fabriquant").fadeTo(200,0.1,function() {
$(this).html('Veuillez renseigner ce champ').addClass('obligatoire').fadeTo(900,1);
});
}
});
});
Ensuite, si le champ n'est pas vide, il doit tester si l'informations entrée est valable, depuis ma bdd mysql et affiche OK si oui ou "Fabriquant inconnu" si non. Pour ça j'ai rajouter à la suite de mon code que je vous montre au dessus ceci :
Et là plus rien de fonctionne comme je le souhaite, même pas la première partie du code.
J'utilise $.post() (plus pratique que $.ajax(), mais j'ai le même problème avec les 2 méthodes) pour vérifier le champ avec ma bdd. Le problème est que quand je clique sur le bouton submit je suis redirigé vers la page indiqué dans le form (action="./create.html"), alors que le bouton submit est sensé être désactivé. Même quand je n'entre rien dans le champ, je suis redirigé vers une autre page alors qu'au départ j'avais bien mon message d'erreur qui s'affichait.
Si je retire la partie du code $.post() là j'ai plus de problème, si le champ est vide le message d'erreur s'affiche et je n'ai aucune redirection vers une quelconque page. Mais à partir du moment où j'ajoute $.post() (ou $.ajax()) là ça fonctionne plus.
Voilà, auriez vous une idée de mon problème s'il vous plait ? Mon script javascript complet est celui-ci :
Desactiver le bouton submit apres avoir clique dessus ne sert a rien (enfin si visuellement il va etre desactive) mais au final le click a deja eu lieu donc il appelle le submit de ton formulaire.
Mon conseille, enleve le submit, cree juste un boutton de type button
Et a la fin de ton JS si tout va bien, tu fais un .submit de ton formulaire pour soumettre le tout
Evite d’appeler ton propre script jquery.js. C'est le nom d'une bibliothèque. Sur un projet perso ca passe peut être (à condition de pas le reprendre quelques années plus tard) mais si tu travailles avec d'autres ils vont pas du tout avoir l'idée d'aller regarder dedans voir pourraient le remplacer par la dernière version de jquery sans voir que ce script n'est pas la véritable bibliothèque.
Un petit +1 si je vous ai aidé est toujours appréciable :).
J'ai remplacé mon input par un button et 'ai appliqué la méthode de rhooManu pour suspendre l'envoie. J'ai juste utilisé "$('#create').click(function(event){" au lieu de "$form.on('submit', function (event) {", qui ne fonctionne pas dans mon cas.
Donc la première partie du code fonctionne, mais j'ai toujours le même problème : dès que j'ajoute la partie ajax il se redirige vers la page indiquée dans action de form :/
J'ai juste utilisé "$('#create').click(function(event){" au lieu de "$form.on('submit', function (event) {", qui ne fonctionne pas dans mon cas.
Quand on se trouve dans un cas comme ça, il faut chercher pourquoi ça ne fonctionne pas plutôt que de rustiner avec autre chose. Essayer des méthodes "qui marchent mais qui ne servent pas à ça" te conduisent dans le problème dans lequel tu es actuellement : ça ne fait pas ce que tu souhaites.
Essaies de nouveau avec le submit du formulaire, et montre-nous le code ensuite, une fois modifié.
- Edité par EmmanuelBeziat 26 octobre 2016 à 16:07:13
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
$(function() {
var $form = $('form');
$form.on('submit', function (event) {
event.preventDefault();
$("#check_fabriquant").removeClass().addClass('messagebox').text('Check en cours...').fadeIn("slow");
var valeur = document.getElementById("fabriquant").value;
if (valeur.replace(/\s/g,"")=="") {
$("#check_fabriquant").fadeTo(200,0.1,function() {
$(this).html('Veuillez renseigner ce champ').addClass('obligatoire').fadeTo(900,1);
});
}
else {
$.post(
"../commun/check.php",
{
nom : $("#fabriquant").val();
valeur : $("#fabriquant").attr("name");
},
function(data) {
if(data=='0') {
$("#check_fabriquant").fadeTo(200,0.1,function() {
$(this).html('OK').addClass('ok').fadeTo(900,1);
});
}
else {
$("#check_fabriquant").fadeTo(200,0.1,function() {
$(this).html('Fabriquant inconnu').addClass('erreur').fadeTo(900,1);
});
}
}
);
}
});
});
Voici aussi le code où j'appel le script jquery nécessaire pour que le mien fonctionne, au cas où la version, ou autre, ne serait pas bonne pour ce que je souhaite faire :
Effectivement, si tu n'as pas d'impératifs de rétrocompatibilité, sache qu'on est à la v3 de jQuery (tu peux/devrais) d'ailleurs le charger en bas de page, juste avant ton script jQuery_check. Par contre, il faut le faire AVANT de refermer body, pas après.
- Edité par EmmanuelBeziat 27 octobre 2016 à 2:20:44
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Empêcher la redirection à une autres pages (ajax)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !