Comment puis-je mettre la valeur de l'identifiant de type d'entrée "e-mail" dans ma boîte d'alerte ?
Le reste du code fonctionne à mon avis, je ne peux tout simplement pas créer la boîte d'alerte affichant la valeur de mon formulaire de courrier électronique.
L'utilisation de bootstrap permet également de créer un design sympa.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
      <div class="box">
<form class="text-center border border-light p-5">

    <p class="h4 mb-4">CHANGE E-MAIL</p>

    <p>Input Old E-mail and New E-mal</p>
    <!-- Name -->
    <input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">

    <!-- Email -->
    <input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">

    <!-- Sign in button -->
    <button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
      </div>       
      </div>
  </div>

    <!-- Optional JavaScript -->
    <script type="text/javascript">
        var email=document.getElementById("email").value;

      function check() {
        alert ("Success your email change to: " +email)
       
      
        }
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
0
Theodore 11 mars 2019 à 21:35

2 réponses

Meilleure réponse

Vous avez juste besoin d'obtenir la valeur d'entrée dans votre fonction de vérification, car sinon elle est obtenue lorsque votre site Web se charge, pas lorsque vous cliquez sur le bouton.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
      <div class="box">
<form class="text-center border border-light p-5">

    <p class="h4 mb-4">CHANGE E-MAIL</p>

    <p>Input Old E-mail and New E-mal</p>
    <!-- Name -->
    <input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">

    <!-- Email -->
    <input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">

    <!-- Sign in button -->
    <button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
      </div>       
      </div>
  </div>

    <!-- Optional JavaScript -->
    <script type="text/javascript">
        

      function check() {
        var email=document.getElementById("email").value; //Moved this into the 'check'-function
        alert ("Success your email change to: " +email)     
      }
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
1
moronator 11 mars 2019 à 18:39

Je voudrais suggérer d'utiliser l'élément [HTML <dialogue>] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). Facile à installer et fonctionne comme un charme !

1
Mister Moody 11 mars 2019 à 19:08