IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Discussion :

Code js fonctionne en local pas sur serveur

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    En reconversion
    Inscrit en
    Mai 2006
    Messages
    509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : En reconversion

    Informations forums :
    Inscription : Mai 2006
    Messages : 509
    Par défaut Code js fonctionne en local pas sur serveur
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    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 ?

    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  3. #3
    Membre éclairé
    Homme Profil pro
    En reconversion
    Inscrit en
    Mai 2006
    Messages
    509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : En reconversion

    Informations forums :
    Inscription : Mai 2006
    Messages : 509
    Par défaut
    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()

  4. #4
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    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
    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
    The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    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 :
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  6. #6
    Membre éclairé
    Homme Profil pro
    En reconversion
    Inscrit en
    Mai 2006
    Messages
    509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : En reconversion

    Informations forums :
    Inscription : Mai 2006
    Messages : 509
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 11
    Dernier message: 31/05/2019, 10h20
  2. Rewriting ok en local pas sur serveur
    Par tremeur53 dans le forum Apache
    Réponses: 3
    Dernier message: 03/06/2010, 22h45
  3. [CS3] video flv, marche en local pas sur serveur distant
    Par mag_sergio dans le forum Dreamweaver
    Réponses: 12
    Dernier message: 11/06/2008, 17h20
  4. [MooTools] AJAX fonctionne en local mais pas sur serveur
    Par LionL dans le forum Bibliothèques & Frameworks
    Réponses: 5
    Dernier message: 07/12/2007, 22h52
  5. AJAX : Fonctionne en local mais pas sur serveur distant ?
    Par jejefeds dans le forum Général Dotnet
    Réponses: 1
    Dernier message: 19/06/2007, 14h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo