Bonjour,

Actuellement je travaille sur un projet web. Sur une de mes pages j'exécute le code javascript suivant:

// AJOUT D'UN MESSAGE DE CONFIRMATION D'ENVOIE LORSQUE LE FORMULAIRE EST SOUMIS
document.getElementById("PostAdminEditForm").onsubmit = function(e)
                {
                                e.preventDefault();
                                document.getElementById("erreur").innerHTML = "Formulaire envoyé avec succès";
                                document.getElementById("erreur").style.backgroundColor = "#33FF00";
                                document.getElementById("erreur").style.borderRadius = "25px";
                                document.getElementById("erreur").style.textAlign = "center";
                                document.getElementById("erreur").style.fontSize = "20px";
                                        setTimeout(function()
                                        {
                                        document.getElementById("erreur").innerHTML = "";
                                        document.getElementById("erreur").style.backgroundColor = "#FFFFFF";
                                        },8000);
									{
										return true;	
									}											
                }

Avant celui-ci je remplis un formulaire pour mettre à jour ma base de donnée.

Le souci est le suivant:

• sans e.preventDefault(); ma base de donnée se met correctement à jour mais le message "Formulaire envoyé avec succès" s'affiche mais uniquement que 1 secondes au lieu de 8.
• avec e.preventDefault(); ma base de donnée ne se met pas à jour mais le message "Formulaire envoyé avec succès" s'affiche et reste bien 8 secondes

Comment faire en sorte que une fois que je clique sur le submit et arrivée à mon code JS je stop l'action  avec e.preventDefault() puis je la reprends à la fin de mon code javascript.

Cordialement,

Première chose c'est déjà de regarder les fautes de code qu'il y a : - Pas de code HTML en brut dans un code JS (ligne 4), et pas d'accolades inutiles (ligne 15 et 17)

Ensuite e.preventDefault() permet d'annuler le comportement du navigateur et passe la main au code du développeur, donc en gros tu dois gérer toi même l'envoi du formulaire. Tu peux par exemple le faire via une requête AJAX et exécuter du code lorsque tu auras une confirmation du serveur que ton formulaire a bien été reçu.

Celousco a écrit:

Première chose c'est déjà de regarder les fautes de code qu'il y a : - Pas de code HTML en brut dans un code JS (ligne 4), et pas d'accolades inutiles (ligne 15 et 17)

Ensuite e.preventDefault() permet d'annuler le comportement du navigateur et passe la main au code du développeur, donc en gros tu dois gérer toi même l'envoi du formulaire. Tu peux par exemple le faire via une requête AJAX et exécuter du code lorsque tu auras une confirmation du serveur que ton formulaire a bien été reçu.

Il n' y a pas de code  html dans mon javascript. C'est juste avec la balise de code de openclassroom j'ai voulu mettre e.preventDefault() en rouge. Donc pas de problème à ce niveau.

Sinon j'avais oublier d'enlever la ligne 15,16,17 c'étais un test.

// AJOUT D'UN MESSAGE DE CONFIRMATION D'ENVOIE LORSQUE LE FORMULAIRE EST SOUMIS
document.getElementById("PostAdminEditForm").onsubmit = function(e)
                {
                                e.preventDefault();
                                document.getElementById("erreur").innerHTML = "Formulaire envoyé avec succès";
                                document.getElementById("erreur").style.backgroundColor = "#33FF00";
                                document.getElementById("erreur").style.borderRadius = "25px";
                                document.getElementById("erreur").style.textAlign = "center";
                                document.getElementById("erreur").style.fontSize = "20px";
                                        setTimeout(function()
                                        {
                                        document.getElementById("erreur").innerHTML = "";
                                        document.getElementById("erreur").style.backgroundColor = "#FFFFFF";
                                        },8000);
                                       
                }

Tout en restant en javascript le code du développeur ne peut pas redonner la main au navigateur ? Via une commande ?

Donc si j'ai bien compris. AJAX va me permettre effectuer des actions sur ma page sans la recharger ?

Donc en AJAX confirmer l'envoie du formulaire + exécution requêtes sql + redirection ?

Voici un résume des actions effectuer par ma page dans ordre chronologique :

• Remplir le formulaire (traitement de celui-ci effectuer sur la même page)
• Envoie du formulaire
• Tester si le formulaire est envoyé 
• Si formulaire envoyé afficher un message de confirmation
• Quand le formulaire est envoyé, les données sont envoyés sur cette même page et des requêtes sql mettent à jour ma base de donnée
• Redirection vers cette page

-
Edité par daniel94vitry 27 juillet 2017 à 17:36:52

Oui AJAX permet d'envoyer des requêtes sans rafraîchir la page.

https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript