Popup disparaît après validation d'un formulaire

**Luke-06** · 19/06/2024, 18h58

Bonjour à tous,

Voilà j'aimerai qu'après la validation d'un formulaire, il s'affiche une pop up en transparence avec un texte. J'ai réussi, mais quand je click sur " valider ", la pop up apparaît et disparaît aussitôt. Elle ne reste pas affichée.

J'ai simplifié le code pour + de facilité, le voici :

HTML =

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Réservation</title>
  <link rel="stylesheet" href="css/style.css">
  <script type = "text/javascript" src="js/popup.js"></script>
</head>
<body>
 
<div id="main">
 
    <div id="center">
 
        <form action="" method="get" class="form-example">
 
 
            <button id="submit" onclick="openForm()">Test</button>
 
        </form>
 
    <div id="popup">
        <p> Confirmation </p>
    </div>
 
    </div>
 
 
 
</div>    
</body>
</html>

CSS =

Code css :

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
body  {
    background: black;
    color: white;
    font-family: sans-serif;
}
 
#main {
    width: auto;
}
 
#center {
    margin:auto;
    width: 400px;
}
 
/*-------------------- POP UP CONFIRM --------------------*/
 
#popup {
    color: black;
    background-color: white;
    width: 50%;
    height: 50%;
    position:absolute;
    left: 25%;
    top: 25%;
    display:none;
    opacity: 95%;
}

JS =

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function openForm() {
  document.getElementById("popup").style.display = "block";
}
function closeForm() {
  document.getElementById("popup").style.display = "none";
}

Voilà si quelqu'un a une explication, je suis preneur.

Ca fait des heures que je cherche, là j'abandonne

Merci d'avance à ceux qui prendront le temps de m'aider.

**mathieu** · 19/06/2024, 19h25

le souci est que le bouton envoie le formulaire ce qui recharge la page.

pour éviter cela, mettez cela dans le code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="submit" onclick="openForm(event)">Test</button>

et ensuite cela dans le code javascript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function openForm(event)
{
	event.preventDefault();
	document.getElementById("popup").style.display = "block";
}

**Luke-06** · 19/06/2024, 19h39

Super ça fonctionne ! Un grand merci à toi

Popup disparaît après validation d'un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager