Code js fonctionne en local pas sur serveur

Version imprimable

Bonjour a tous,

Je suis sur la création d'un petit site web avec un formulaire ( pour mon apprentissage du développement web) et sur l'envoie du formulaire j'ai mis une boite de dialogue pour valider l'envoie du formulaire.
Cependant mon code js fonctionne en local, j'ai bien ma boite de dialogue qui s'affiche, mais pas sur serveur.

J'ai beau regarder je ne vois rien qui cloche, voici mon code:

HTML: contact.html

Code:

1
2
3
4
5
6
7
8
<formid="contactForm"action="formulaire.php"method="post">          <label for="name">Name:</label><br />
          <input type="text" id="name" name="name" value="Edouard" /><br />
          <label for="email">Email:</label><br />
          <input type="email" id="email" name="email" value="example@seamail.com" /><br />
          <label for="message">Message:</label><br />
          <textarea id="message" name="message" cols="50" rows="8"></textarea><br /><br />
          <input type="submit" value="Envoyer" />
</form>

JS: script.js

Code:

1
2
3
4
5
6
7
constmessage =  "Merci pour votre message, nous allons vous repondre dans les plus bref délai";
 
document.getElementById("contactForm");
document.addEventListener("submit", function (event) {
  event.preventDefault();
  alert(message);
});

Et PHP: formulaire.php

Code:

1
2
3
4
5
6
7
8
9
<?php
 
$to = "treza88@hotmail.com";
$subject = 'Mail sent from sendmail PHP script';
$from = $_POST["email"];
 
mail($to, $subject, 'Email de l\'expediteur : ' . $from . "\r\n" . "\r\n" . $_POST['message'] . "\r\n" . "\r\n" . $_POST['name']);
header("location:" . $_SERVER['HTTP_REFERER']);
?>

si vous avez une idée, merci d'avance

Bonjour,

He ben, c'est pas joli joli comme code... (c'est pas contre toi mais contre les formateurs !)
Je veux bien qu'on doive passer par le stade de l'apprentissage mais je pense pas que cette étape-ci était nécessaire (et pourquoi faire du JS comme ça ?? Une alert() en 2022 ? :()

Bon passée cette constatation, il faudrait aussi être plus rigoureux dans le code partagé.
Il contient pas mal de fautes... est-ce que ça vient du copier/coller ou est-ce que c'est comme ça dans le code ? Difficile à dire.
(d'autant que la colorisation syntaxique n'est pas habituelle sur le forum)

Toujours est-il qu'il faut séparer les attributs par des espaces dans l'ouverture de <form>.
Il manque également un c à const et le mot-clé doit être suivi d'un espace.

Je voudrais rencontrer la personne qui vous a demandé de faire une page formulaire.php qui envoie des mails à tout bout de champs sans aucune validation/vérification ? 8O8O8O8O

En tout cas, si on corrige les fautes de frappes et/ou de copier/coller, ça fonctionne.
A noter que le formulaire ne s'enverra pas vu qu'il y a preventDefault().

Voici le code testé et visible ici : https://tests.pierre-roels.com/simple-form.php :
(j'ai également fait un CodePen juste pour que tu puisses facilement voir & tester l'HTML/JS : https://codepen.io/DarkStar123456/pen/qBVLWQg)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
if (!empty($_POST)) {
    $to = "treza88@hotmail.com";
    $subject = 'Mail sent from sendmail PHP script';
    $from = $_POST["email"];
 
    mail($to, $subject, 'Email de l\'expediteur : ' . $from . "\r\n" . "\r\n" . $_POST['message'] . "\r\n" . "\r\n" . $_POST['name']);
    header("location:" . $_SERVER['HTTP_REFERER']);
}
?><form id="contactForm" action="" method="post">          
    <label for="name">Name:</label><br />
    <input type="text" id="name" name="name" value="Edouard" /><br />
    <label for="email">Email:</label><br />
    <input type="email" id="email" name="email" value="example@seamail.com" /><br />
    <label for="message">Message:</label><br />
    <textarea id="message" name="message" cols="50" rows="8"></textarea><br /><br />
    <input type="submit" value="Envoyer" />
</form>
<script>
    const message = "Merci pour votre message, nous allons vous repondre dans les plus bref délai";
 
    document.getElementById("contactForm");
    document.addEventListener("submit", function (event) {
        event.preventDefault();
        alert(message);
    });
</script>

EDIT : A titre de comparaison, voici un exemple un peu mieux (pas parfait car il manque notamment quelques protections de sécurité); et je suis conscient que c'est probablement plus avancé notamment au niveau du PHP mais même au niveau de l'HTML il est déconseillé d'utiliser tous ces <br /> et plutôt encadrer les différents éléments par des blocs (div) ou des paragraphes (p) et les mettre en style via CSS
J'ai également ajouté la validation HTML5 (c'est pas primordial car c'est la validation PHP qui compte) mais pour commencer c'est toujours bien et ça prend 2s ^^
Visible en live ici : https://tests.pierre-roels.com/simple-form-v2.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<?php
 
/**
 * Retourne le mot-clé de l'erreur pour un champ un donné
 * Retourne false si pas d'erreur ou mot-clé inexistant
 * 
 * @param string $index
 * @return string|bool
 */
function form_error($index) {
    $errors = $GLOBALS['errors']; // On récupère la variable définie en-dehors du scope de notre fonction
    return (!empty($errors[$index])) ? $errors[$index] : false;
}
 
/**
 * Retourne la valeur de l'index défini dans $_POST
 * Si l'index n'existe pas, c'est la valeur par défaut qui sera affichée
 * 
 * @param string $index
 * @param string $default
 */
function form_value($index, $default = "") {
    return (isset($_POST[$index])) ? $_POST[$index] : $default; // Si l'index existe on le retourne (même s'il est vide !), sinon on affiche la valeur par défaut
}
 
$errors = [];
// J'ai sorti cette variable de la logique d'envoi du formulaire 
// car j'ai ajouté un message d'erreur si le mail n'arrivait pas à s'envoyer
$to = "ADRESSE_EMAIL@DOMAIN.TLD";
 
// On vérifie que le formulaire a bien été soumis et que c'est celui de contact
if (!empty($_POST['action']) && $_POST['action'] === 'contact-submit') {
 
    // Validation des champs obligatoires
    // On créé un tableau, c'est plus facile à valider à la volée et à modifier
    $required_fields = ['name', 'email', 'message'];
    foreach ($required_fields AS $v) {
        if (empty($_POST[$v])) { // Dans ce cas-ci, c'est bien le fait que la valeur soit vide qu'on vérifie
            $errors[$v] = 'empty';
        }
    }
 
    // Validation du format de l'adresse email (on ne valide que s'il n'y a pas déjà une erreur avec l'adresse email)
    // filter_var() est une fonction fournie par PHP qui permet de valider pas mal de choses, c'est très pratique ^^
    if (empty($errors['email']) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'invalid';
    }
 
    // Seulement si on a aucune erreur dans le formaire nous allons procéder à son traitement (ici, envoyer un mail)
    if (empty($errors)) {
        $subject = 'Mail sent from sendmail PHP script';
 
        // Un autre moyen d'envoyer un message en plusieurs lignes est de créer un tableau
        // On va ensuite "aplatir" le tableau et utiliser le caractère de retour à la ligne pour mettre les lignes l'un après l'autre
        $message = [
            "Nom de l'expéditeur : " . stripslashes($_POST['name']), // On utilise stripslashes() pour virer les slashs d'escape (essaye d'écrire un nom avec une apostrophe par exemple)
            "Email de l'expéditeur : " . $_POST['email'],
        ];
 
        // implode() est donc la méthode pour convertir un array en string.
        // le premier paramettre défini la "glue" qui va unir les lignes du tableau
        // PHP_EOL est une super constate de PHP qui retourne \n sur les serveurs linux et \r sur les serveurs Windows, ça évite d'écrire \r\n
        if (mail($to, $subject, implode(PHP_EOL, $message))) {
            header("Location: ./simple-form-v2.php?success=1"); // On redirige avec une variable dans l'URL pour afficher un message success
            exit;
        } else {
            // Si le mail n'a pas été envoyé, on va définir une valeur dans notre tableau pour afficher un message
            $errors['send_email'] = 1;
        }
    }
}
?>
<style>
    label {
        display: block;
    }
 
    .form-group {
        margin-bottom: 1rem;
    }
 
    .error {
        color: red;
        font-size: 12px;
    }
</style>
<?php if (!empty($_GET['success'])) : ?>
    <!-- On affiche le message comme quoi l'email a bien été envoyé -->
    <h2>Merci pour votre message !</h2>
    <p>Nous allons vous repondre dans les plus bref délai</p>
<?php elseif (!empty($errors['send_email'])) : ?>
    <h2>ERREUR</h2>
    <p>Le formulaire a été rempli correctement mais nous n'avons pas pu envoyer le mail.</p>
    <p>Veuillez réessayer plus tard ou nous contacter directement à l'adresse <a href="mailto:<?= $to; ?>"><?= $to; ?></a>.</p>
<?php endif; ?>
<form id="contactForm" action="" method="post">
 
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value="<?= form_value('name', 'Edouard'); ?>" required="required"/><!-- avec required, on ajoute la validation HTML -->
        <?php if (form_error('name')) : ?>
            <div class="error">ERREUR : ce champ est requis.</div>
        <?php endif; ?>
    </div>
 
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" value="<?= form_value('email', 'example@seamail.com'); ?>" required="required" /><!-- avec required, on ajoute la validation HTML -->
        <?php if (form_error('email')) : ?>
            <div class="error">
                <?php if (form_error('email') == 'invalid') : ?>
                    ERREUR : l'adresse email n'a pas un format valide.
                <?php else : ?>
                    ERREUR : ce champ est requis.
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>
 
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" cols="50" rows="8" required="required"><?= form_value('message'); ?></textarea><!-- avec required, on ajoute la validation HTML -->
        <?php if (form_error('message')) : ?>
            <div class="error">ERREUR : ce champ est requis.</div>
        <?php endif; ?>
    </div>
 
    <div class="form-group">
        <input type="hidden" name="action" value="contact-submit" /><!-- pour facilement savoir si le formulaire a été envoyé, on va tester cette valeur -->
        <input type="submit" value="Envoyer" />
    </div>
 
</form>

02/03/2022, 14h29
zoumzoum59

Bonjour et merci darkstar123456 pour ton retour,

Pour le c qui manque et les espaces, c'est du au copié collé, le c je n'ai pas vu que je ne l'avais pas copié, et les espaces ont disparu avec le collé, mais dans mon code originale tout y est.
Mais je ferai plus attention une prochaine fois, je ne pensais pas qu'il pouvait disparait au collé.

Quand a la colorisation ça m'a paru bizarre et difficile a lire, mais vu que ça c'était mis en automatique, je me suis dit que ça devait être normale.

Pour le formulaire.php, je plaide coupable a 100%, j'ai voulu essayer de poster mon formulaire, en faisant mes recherche sur le net en faisant un code le plus simpliste possible juste pour voir si j'arrivais a envoyer le message, et par contre le formulaire c'est bien envoyé contrairement a ce que tu m'a écrit, c'est juste l' alert() qui ne s'affiche pas quand je le lance sur le serveur, mais par contre en local l' alert() fonctionne.

Par contre peux tu me dire pourquoi mon PHP envoie des mails à tout bout de champs, je ne comprends pas. Qu'il n'y ai pas de test et de vérification je comprends (c'était voulu) et je vais bien regarder le code que tu m'a envoyé pour le décrypter.

Et je ne comprend pas pourquoi non plus le formulaire ne sera pas envoyer a cause de preventDefault(), vu que c'est dans le js et qu'il n'est présent que pour l' alert()
02/03/2022, 15h52
darkstar123456
Hello,

OK je comprends mieux. Je trouvais cet exercice du genre à mettre la charrue, les voyageurs, le chien et le chat avant les boeufs ^^

Par contre dans ce que tu m'expliques, pas grand chose n'est logique.

Voici les 2 seules choses possibles normalement :
1. Si ton formulaire s'envoie, alors il n'y devrait pas y avoir d'alert()
2. A l'inverse, si ton formulaire ne s'envoie pas, alors il doit y avoir une alert()
Pourquoi ?

Dans le premier cas, si ton formulaire s'envoie, ça veut dire que ton code JS n'est pas exécuté (soit car il y a une erreur de JS, soit il n'arrive pas à trouver l'ID #contactForm et donc l'événement submit n'est pas intercepté car il n'y a rien à intercepter, soit autre chose ? As-tu pensé à regarder la console du navigateur ?)
En effet, comme je l'ai dit, la ligne event.preventDefault(); sert justement à empêcher le formulaire de s'envoyer.
Il est alors possible que le code arrive à la ligne suivante et affiche une alert()
Je vois également que dans ton post original, tu as écrit script.js; tu n'aurais pas oublié d'inclure ce fichier dans ton HTML ? On ne voit pas de balise <script> dans ton code

Dans le second cas, si tu as une alert(), alors tout va bien.
L'ID a été trouvé dans la page et donc l'événement submit a bien été déclenché et intercepté par le JS.
event.preventDefault(); a bloqué la soumission du formulaire et n'a donc pas chargé formulaire.php (donc pas de changement de page) et donc la suite du code JS peut être exécuter (à savoir l'alert())

---

Plus d'info sur event.preventDefault() :

https://developer.mozilla.org/fr/doc...preventDefault

Citation:

La méthode preventDefault() [...] indique à l'agent utilisateur que [...], l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

La même définition en plus facile à lire/comprendre :
https://www.w3schools.com/jsref/even...entdefault.asp

Citation:

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

Bonjour,

Citation:

Cependant mon code js fonctionne en local, j'ai bien ma boite de dialogue qui s'affiche, mais pas sur serveur.

Tout d'abord un petit rappel :

https://www.developpez.com/template/kit/kitinfo.png Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

ceci étant comme dit justement les « vrais vérifications » sont à effectuer côté serveur donc, en cas de souci, il existe le forum PHP dans ton cas !

Pour en revenir à l'objet principal de ton questionnement, il faudrait d'abord que tu nous mettes les VRAIS codes que tu utilises car en lisant et après correction :
Code:

1 2 3 4 5 6 7 const message = "Merci pour votre message, nous allons vous repondre dans les plus bref délai"; document.getElementById("contactForm"); document.addEventListener("submit", function (event) { event.preventDefault(); alert(message); });
j'ai des doutes quant au bon fonctionnement de la chose, essaie peut-être :
Code:

1 2 3 4 5 6 7 const message = "Merci pour votre message, nous allons vous repondre dans les plus bref délai"; const elemForm = document.getElementById("contactForm"); elemForm addEventListener("submit", function(event) { event.preventDefault(); alert(message); });
et comme également dit précédemment event.prevenDefault() annule l'action par défaut donc pas d'envoi du formulaire, sauf si erreur dans le code JavaScript.

[Edit] suppression d'un document en trop dans le code

02/03/2022, 18h38
zoumzoum59

Merci a vous deux pour ce complément d'info,

Et pour les vérifications je vais m'y attacher de toutes façon il va bien falloir a un moment ou a un autre que je sorte un code valide pour ce genre de chose.
Sinon pour mon code, en effet quand l'ajert() apparait il n'y a pas d’envoyé de mail.

Une question en passant, les navigateur web gardent ils en cache le fichier JS en mémoire?
Car je me suis aperçu en me servant de la console du navigateur (comme conseillé par darkstar123456), que le fichier JS était d'une ancienne version, et n'avait pas été actualisé lors du chargement de la page contact.html.

Est ce possible de limiter ce phénomène?

Eh Merde!!!, je vais me faire taper sur les doigts par NoSmoking, ça fait encore deux questions
02/03/2022, 19h20
NoSmoking

Citation:

Est ce possible de limiter ce phénomène?

il peut y avoir effectivement un souci avec le cache et tu peux le régler en ajoutant une version au nom de tes fichiers ou encore insister avec le Ctrl + F5, de plus dans la console du navigateur tu peux désactiver le cache dans l'onglet réseau.

Citation:

Eh Merde!!!, je vais me faire taper sur les doigts par NoSmoking, ça fait encore deux questions

:nono: tu es en plein dans le sujet mais si cela te peux te faire plaisir :fessee:
03/03/2022, 10h33
zoumzoum59

Encore merci a vous deux, :ccool:

Je vais faire un petit bilan, car beaucoup de choses ont été abordé et corrigé moi si j'ai mal compris quelque chose:

_1 : j'avais un code qui fonctionnait, mais qui n'affichait pas le bon fonctionnement a cause du cache du navigateur, ce qui a perturbé en partie ma compréhension du code en plus de mon inexpérimentation.
_2 : Code qui fonctionnait certes, mais avec des soucis de construction, que vous avez pointé et clairement expliqué.
_3 : J'avais également une incompréhension total du fonctionnement de preventDefault(), ce qui est beaucoup plus clair dans mon esprits maintenant.

Cependant une question me vient, lors de l'affichage de la page le navigateur lit la page html, ensuite exécute le js et après exécute le php, en tout cas ça a l'air comme ça dans ce code.
Est ce toujours comme ça que ça se passe ou pas forcément?
Et ou puis je trouvé une explication de cette interaction entre les différent langages qui compose une page web?
Parque ça me parait indispensable de le comprendre pour pouvoir interprété le fonctionnement du code.

_4 : Je vais relire tout ça pour bien tout comprendre, et surtout la partie en PHP de darkstar123456 sur la vérification du formulaire avant l'envoie .

Une question sur la console du navigateur, peux elle servir a déboguer une page web en même temps qu'on l'utilise?

Et une dernière question pour la route en rapport avec le fonctionnement du forum, comment faites vous pour surligner les éléments de code en gris, je n'ai pas trouvé!!

Bonjour,

Ca en fait des questions ^^ Je vais essayer de répondre

Concernant le bilan, ça m'a l'air OK

Pour ce qui est du mode de fonctionnement, il faut retenir que les navigateurs ne peuvent lire que certains langages.
En gros, ils ne comprennent que l'HTML, le CSS et le JS.

PHP est exécuté côté serveur et interprété (interprétation = compilation côté serveur) afin de générer de l'HTML qui sera alors compréhensible par le navigateur.
Les codes CSS et JS sont des surcouches exécuté côté client (navigateur)

Pour ce qui est de la console, oui il est possible de faire du débuggage en écrivant directement dedans mais ça se rapporte plus à des tentatives de hacking ou du debug externe avancé.
Je te déconseille d'écrire directement dedans tant que tu débutes ^^
Par contre, tu peux y constater des erreurs javacript si tu en as, ou afficher des valeurs depuis ton code en utilisant par exemple : console.log("Coucou !"); affichera "Coucou" dans la console.
Il est possible d'y passer des variables pour vérifier des valeurs à des moments clés. Par exemple :
Code:

1 2 3 4 5 6 var variable_a_tester = "La tête à Toto"; console.log('Ma var vaut :', variable_a_tester); // Ca marche aussi avec des objets ou des tableaux :-) var variable_objet = {name: "Zoumzoum", department: 59}; console.log('Ma variable objet vaut :', variable_objet);
En ce qui concerne le surlignement, comme il existe des balises [code ][ /code], tu peux utiliser [c ][ /c] pour du code "inline" ;)

03/03/2022, 17h51
NoSmoking

Je rajoutes ceci :
Liste des balises BB reconnues : Liste des balises BB, aux quelles il manque celle citée par darkstar123456 [C=langage]code[/C].

De plus il existe pour infos : Aide sur l'utilisation des boutons.
03/03/2022, 18h17
zoumzoum59

Ok et encore un grand merci pour tout, je pense que je suis arrivé au bout de mon sujet, je vais donc le passer en résolu.