How can I make the pop up stay and not make it go to another page?-CodePudding

I am new to programming and I'm not sure what I'm going to do anymore, I'm at a loss. The thing is, our teacher wants us to have like a pop up alert message when he presses submit on our sign up webpage that confirms that the sign up was successful. The issue for my webpage is that whenever I click submit, it goes to another page. thank you for your time.

This is the thing our teacher assigned us for our finals

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #362204;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 20%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Register Now!</title>    
   <link rel="stylesheet" type="text/css" href="style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {font-family: Arial, Helvetica, sans-serif;}
    form {border: 3px solid #f1f1f1;} 
</style> 
</head>
<body>
<body style="background-color: #FFB6C1">
<h2><center><img src="logo.png" alt="Logo"  width="300"/></center></h2>
<form action="/actionpage.php" onsubmit="yourJsFunction();return false">
  <div  style="background-color:#fff">
    <br><center><img src="avatar.png" alt="Avatar" 
     height="250"/></center>


    <h1><left>&nbsp&nbspCreate a New Account</h1>
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPlease fill in this form to become a member, master!</p>
    <hr>

    <label for="email"><b>&nbsp&nbsp&nbsp&nbspEmail</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>&nbsp&nbsp&nbsp&nbspPassword</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <label for="psw-repeat"><b>&nbsp&nbsp&nbsp&nbspRetype Password</b></label>
    <input type="password" placeholder="Retype Password" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>&nbsp&nbsp&nbsp&nbspBy creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto return false;">Sign Up</button>

<div id="id01" >
  <span onclick="document.getElementById('id01').style.display='none'"  title="Close Modal">&times;</span>
  <form  action="/action_page.php">

    <div >
      <span onclick="document.getElementById('id01').style.display='none'"  title="Close Modal">&times;</span>
      <center><img src="check.png" alt="Avatar" ></center>
    <h1><center>Success!</center></h1>
        <p><center>Thank you for joining! We hope to see you more often, Master Patron!</center></p>
</div>
</div>

    <div >
        <button type="button" onclick="document.getElementById('id01').style.display='none'" >Cancel</button>


    <span ><a href="#">Already a Master Patron?</a></span>

  </div>
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

</script>
</body>
</html>

CodePudding user response：

Whenever you click on submit button in a form, the default behavior of form is to redirect to the action page, so you may need to use eventlistener for this to work

let submitForm = document.getElementById('submit-form');
submitForm.addEventListener('submit', function(e){
    e.preventDefault();
    openModal(); 
    //choose whatever function you want to call or 
    //action you want to take when submitting form
});

This will not redirect you to another page

NOTE : This is not an ideal way for form submission, if you know how to work with AJAX you should try that for form submission.

CodePudding user response：

To get that alert message on clicking of the sign up button, you should remove the get.php from action tag of the html code. I created a function of Javascript for that alert message of Signup was successful. I added that function in the form tag of onsubmit attribute as it will call my function when the user press the submit button of the form.

<!DOCTYPE html>
<html>
<head>
<title>Register Now!</title>    
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;} 
</style> 
<style>
input[type=text], input[type=password] {
   width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #362204;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
   border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  margin: 24px 0 12px 0;
}

img.avatar {
   width: 20%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 padding-top: 60px;
 }

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
       display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
    <body>
    <body style="background-color: #FFB6C1">
    <h2><center><img src="logo.png" alt="Logo"  width="300"/></center></h2>
    <form action="" onsubmit="alertMessage();return false"> <!----here I added the function alertMessage() in onsubmit attribute such that whenever a user submit the form, it will call the js function------>
      <div  style="background-color:#fff">
        <br><center><img src="avatar.png" alt="Avatar" 
 height="250"/></center>


    <h1><left>&nbsp&nbspCreate a New Account</h1>

<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPlease fill in this form to become a member, master!</p>
    <hr>

    <label for="email"><b>&nbsp&nbsp&nbsp&nbspEmail</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>&nbsp&nbsp&nbsp&nbspPassword</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <label for="psw-repeat"><b>&nbsp&nbsp&nbsp&nbspRetype Password</b></label>
    <input type="password" placeholder="Retype Password" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>&nbsp&nbsp&nbsp&nbspBy creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto return false;">Sign Up</button>


<div id="id01" >
  <span onclick="document.getElementById('id01').style.display='none'"  title="Close Modal">&times; 
</span>
  <form  action="/action_page.php">

    <div >
      <span onclick="document.getElementById('id01').style.display='none'"  title="Close Modal">&times; 
   </span>
      <center><img src="check.png" alt="Avatar" ></center>
            <h1><center>Success!</center></h1>
               <p><center>Thank you for joining! We hope to see you more often, 
   Master Patron!</center></p>
    </div>
    </div>

    <div >
        <button type="button" onclick="document.getElementById('id01').style.display='none'" >Cancel</button>


    <span ><a href="#">Already a Master Patron?</a></span>

  </div>
    <script>
    // Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    alert("signup was successful");
  }
}
// The function needed for an alert message
function alertMessage(){
    alert("Signup was successful!!");
}

</script>
</body>
</html>