fenetre alert

Sujet résolu

Véronique22

11 février 2019 à 9:53:59

Bonjour à tous je souhaite créer un message d'alert sur ma page ce que j'ai réussi à faire :

<body>

<center><u><h1> INFORMATIONS CLIENTS </h1></u></center>

<div class="div"><form action='form_traitement.htm' method='get'>

<br /><br /><label>Nom : </label><input type="text" id="nom" placeholder="Entrez votre Nom" required />

<br /><br /><label>Prénom : </label><input type="text" id="prenom" placeholder="Entrez votre Prénom" required />

<br /><br /><label> Téléphone : </label>

<input type='tel' required pattern='[0-9]{10}' placeholder='dix chiffres' maxlength='10'>

<br /><br /><label> N° Passeport : </label>

<input type='tel' required pattern='[0-9]{10}' placeholder='dix chiffres' maxlength='10'>

<br /><br /><label> N° Billet : </label>

<input type='tel' placeholder='13 caractères' maxlength='13'>

<br /><br /><label>Mail : </label><input type="email" id="email" placeholder="Entrez adresse mail" required />

<br /><br /><label for=adresse>Adresse : </label>

<textarea id=adresse name=adresse rows=5 placeholder="Entrez votre adresse" required></textarea><br />

<br /><label for=codepostal>Code postal : </label>

<input id=codepostal name=codepostal type="text" placeholder="Entrez votre code postale" required>

<br /><br /><label for=pays>Pays : </label>

<input id=pays name=pays type=text placeholder="Entrez votre pays" required>

<br /><br /><form><input type='submit' value="Validez" class="button" onClick="Message()" /></form>

<script type="text/javascript">

function Message() {

var msg = "Vos informations on bien été enregistrées !!";

console.log(msg)

alert(msg);

}

</script>

</form></div>

</body>

Mais je ne veut pas que la fenetre d'alert s'affiche si je n'ai pas complètement rempli les champs.

Merci pour ceux qui voudrons bien m'aider

-
Edité par Véronique22 11 février 2019 à 9:57:25

Thomas D

11 février 2019 à 10:01:19

Bonjour,

Merci d'utiliser le bouton </> à l'édition de ton message pour partager ton code correctement.

// ton code doit apparaître comme ceci

lesjoiesducode / Les points-virgules en JavaScript

Véronique22

11 février 2019 à 10:26:51

<body>
    <center><u><h1> INFORMATIONS CLIENTS </h1></u></center>
    <div class="div"><form action='form_traitement.htm' method='get'>
    <br /><br /><label>Nom : </label><input type="text" id="nom" placeholder="Entrez votre Nom" required />
    <br /><br /><label>Prénom : </label><input type="text" id="prenom" placeholder="Entrez votre Prénom" required />
    <br /><br /><label> Téléphone : </label>
    <input type='tel' required pattern='[0-9]{10}' placeholder='dix chiffres' maxlength='10'>
    <br /><br /><label> N° Passeport : </label>
    <input type='tel' required pattern='[0-9]{10}' placeholder='dix chiffres' maxlength='10'>
    <br /><br /><label> N° Billet : </label>
    <input type='tel' placeholder='13 caractères' maxlength='13'>
    <br /><br /><label>Mail : </label><input type="email" id="email" placeholder="Entrez adresse mail" required />
    <br /><br /><label for=adresse>Adresse : </label>
    <textarea id=adresse name=adresse rows=5 placeholder="Entrez votre adresse" required></textarea><br />
    <br /><label for=codepostal>Code postal : </label>
    <input id=codepostal name=codepostal type="text" placeholder="Entrez votre code postale" required>
    <br /><br /><label for=pays>Pays : </label>
    <input id=pays name=pays type=text placeholder="Entrez votre pays" required>
    <br /><br /><form><input type='submit' value="Validez" class="button" onClick="Message()" /></form>
    <script type="text/javascript">
        function Message() {
            var msg = "Vos informations on bien été enregistrées !!";
            console.log(msg)
            alert(msg);
        }
    </script>
</form></div>
</body>

Thomas D

11 février 2019 à 15:17:06

Je t'encourage à utiliser un validateur de code. Ton code contient de nombreuses erreurs de syntaxe HTML. Retiens également que lorsque tu veux mettre en forme un élément (souligner un texte, le centrer, mettre un espace entre tes champs etc.), c'est de la forme donc du CSS.

Quant à ton problème, il est causé par deux erreurs :

tu as créé un formulaire dans un formulaire pour ton bouton submit. Tu ne peux pas faire ça. Ton input type submit fait partie intégrante de ton formulaire car il permet de le "soumettre".
Tu n'utilises pas le bon évènement. A chaque fois que tu cliques sur ton bouton de validation, tu affiches ton message. Or, tu souhaites l'afficher lorsque tu soumets ton formulaire.

<body>
  <h1>INFORMATIONS CLIENTS</h1>

  <form action='form_traitement.htm' method='get' onsubmit="message()">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" placeholder="Entrez votre Nom" required />

    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" placeholder="Entrez votre Prénom" required />

    <!-- reste de ton formulaire -->

    <input type="submit" value="Validez" />
  </form>

  <script>
    function message() {
      const msg = "Vos informations on bien été enregistrées !!";
      console.log(msg)
      alert(msg);
    }
  </script>
</body>

J'appelle la fonction message() sur l'évènement onsubmit de ta balise form.

lesjoiesducode / Les points-virgules en JavaScript

Véronique22

15 février 2019 à 9:31:36

Thomas D a écrit:

Je t'encourage à utiliser un validateur de code. Ton code contient de nombreuses erreurs de syntaxe HTML. Retiens également que lorsque tu veux mettre en forme un élément (souligner un texte, le centrer, mettre un espace entre tes champs etc.), c'est de la forme donc du CSS.

Quant à ton problème, il est causé par deux erreurs :

tu as créé un formulaire dans un formulaire pour ton bouton submit. Tu ne peux pas faire ça. Ton input type submit fait partie intégrante de ton formulaire car il permet de le "soumettre".

Tu n'utilises pas le bon évènement. A chaque fois que tu cliques sur ton bouton de validation, tu affiches ton message. Or, tu souhaites l'afficher lorsque tu soumets ton formulaire.
<body>
  <h1>INFORMATIONS CLIENTS</h1>

  <form action='form_traitement.htm' method='get' onsubmit="message()">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" placeholder="Entrez votre Nom" required />

    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" placeholder="Entrez votre Prénom" required />

    

    <input type="submit" value="Validez" />
  </form>

  <script>
    function message() {
      const msg = "Vos informations on bien été enregistrées !!";
      console.log(msg)
      alert(msg);
    }
  </script>
</body>
J'appelle la fonction message() sur l'évènement onsubmit de ta balise form.

je te remercie de tes conseils j'ai réussi à régler mon problème merci beaucoup.

fenetre alert

× 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.

fenetre alert

fenetre alert

Supprimer

Modérer

Signaler le message aux modérateurs