Skip to content
Advertisement

Redirect to a web page when a user clicks on the ok button of the sweet alert

I am using sweet alert (https://sweetalert2.github.io/) to pop up a success alert after a registration in this way:

    <script>
    swal('Registration was successful',
    'Welcome to bottles beach',
    'success');
    console.log("Form is correct and submitted");
    </script>

But I don’t know why if I use this other way the sweet alert doesn’t work:

  <script>
  Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})
 </script>

I want that if a user clicks on ok, he will be redirected to another web page, but I don’t know how to do it but online I’m finding people who only use the second form to redirect a user to a web page once they click the “ok” button; Anyone know how I should do it?

i use this library version: https://unpkg.com/sweetalert/dist/sweetalert.min.js

2 problems to solve: -not working (nothing appears) Swal.fire but only swal works (…) -how can I redirect a user when they click ok in the sweet alert?

Complete code:

    <!DOCTYPE html>
<html>
<head>
<title>Bottles Beach - Send your bottles</title> <!--Bottles Island-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!--sweet alert lib-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>




<style>

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7d5c3c;
}

.topnav {
  overflow: hidden;
  background-image:linear-gradient(180deg,#288bd7,#64ABE3,#64ABE3); background-size: 100%;
  
}
* {
  box-sizing: border-box;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-image:linear-gradient(100deg,#288bd7,#64ABE3,#64ABE3); background-size: 100%;
  transition: all 1 ease;
  color: white;
}

.topnav a.active {
  background-color: #62b1d0;
  color: #f2f2f2;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.txt {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

.txt:hover
{
    background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */
  color: rgba(240, 238, 242);
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

/*scroll bar*/
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.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 */
}

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

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.container {
  margin: 10px auto;
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: #966e47;
}



.board {
  margin: 10px;
  height: calc(100% - auto);;
  width: calc(100% - 20px);
  background-color: #b08153;
  font-size: 2.5em;
  font-weight: bold;
  color: white;
  text-align: center;
}


.input{

    border-radius: 3px;
    border: none;
    width: 100%;
    height: 32px;
    background-color: #333333;

}

.lbl{
    color: white;
}



.btnstyle{

    width: 100%;
    border: none;
    border-radius: 3px;
    background-color: #333333;
    color: white;
    text-color: black;
    height: 34px;
    margin-top: 10%;

}

.grandParentContaniner{
    display:table; height:70%; margin: 0 auto;
}

.parentContainer{
      display:table-cell; vertical-align:middle;
      text-align: center;
      width: 120%;
      transition: all 1.9s ease;  

}
.parentContainer:hover{
      width: 70%;  
      transition: all 0.9s ease;
}
.form_login{
  transition: all 1.5s ease;
  width: 100%;
  padding: 25px;
  border-radius: 10px;
  background-image:linear-gradient(150deg,#64ABE3,#64ABE3,#BBDBF7,#BBDBF7);
  background-size: 100%;
}

</style>
</head>
<body>



<div class="topnav" id="myTopnav"> 
  <a href="index.php">Send a Bottle</a>
  <a href="bottles.php" class="active">Bottles</a>
  <a href="cht.php" >Chat</a>
  <a href="about.php">About</a>
  <a href="donate.php">Donate</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
  </a>
</div>
<br>
  <div class="grandParentContaniner">
    <div class="parentContainer">
      <div class="form_login">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>"> 
          <h1 style="margin-bottom: 10%; color: #333333">Sign-in</h1>   
          <hr width="100%" style="color: black"> <br>
          <input type="input" name="username" class="input" placeholder="insert your username"><br><br>
          <input type="input" name="e-mail" class="input" placeholder="insert your e-mail"><br><br>
          <input type="input" name="password" class="input" placeholder="retype your password"><br><br>
          <input type="input" name="rtpassword" class="input" placeholder="insert your password"><br><br><br>
          <input type="submit" class="btnstyle" value="Sign in">
        </form>
        <a href="login.php"><button class="btnstyle">Log-in</button></a>
      </div>
    </div>
  </div>
 

  
  <?php

  //Connect To Database
  
  $username="";
  $password="";
  $dbname="";
  $name ="";
  $hour =date('H:i');
  $insert = "";
  $cont = 0;
  $dt = date("Y-m-d");

$conn = new mysqli($hostname,$username, $password, $dbname); 
  if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

  /*
  
  */
  
 

  if($_SERVER["REQUEST_METHOD"] == "POST"){

     
      $username = $_POST["username"];
      $email = $_POST["e-mail"];
      $password = $_POST["password"];
      $rtpassword = $_POST["rtpassword"];
      $nook = false;
      $errsameuser = false;

      $queryy = "SELECT username FROM users";
      $result = $conn->query($queryy);
      
      if ($result->num_rows > 0) 
      {
        //output data of each row
      while($row = $result->fetch_assoc()) 
       {
        if( $row["username"] == $username){  //username already exist
            $errsameuser = true;
    }
  }
 }

      

      if($password == $rtpassword){ //pssw e conferma pssw enno uguali
        
        ?>
        <script>
        console.log("password 1 and 2 match");
        </script>
        <?

        if(strlen($password) < 8)
          $nook = true;
        
        if(!preg_match("#[a-z]+#", $password) ) //pssw must cointain at least  lower word
         $nook = true;
         
         if(!preg_match("#[A-Z]+#", $password) ) //pssw must cointain at least upper word
         $nook = true;
         
        if ( !preg_match("/['^£$%&*()}{@#~?><>,|=_+!-]/", $password) )  //pssw must cointain at least special character
         $nook = true;
         
        if ( !preg_match("#[0-9]+#", $password) )  //pssw must cointain at least number
        $nook = true;
        


        if($nook){
            ?>
        <script>
        console.log("but password not ok")
        </script>
            <?
        }

        if($errsameuser){
          ?>
        <script>
        swal('This username already exists',
        'Please choose a new username',
        'error');
        </script>
        <?
        }

       

        else{
            $query = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
            $result = $conn->query($query);
     ?>
        
        <script>
        Swal.fire({
  title: 'Welcome to bottles beach',
  text: "You successfully submitted the form",
  icon: 'success',
  showCancelButton: false,
  confirmButtonColor: '#3085d6',
  confirmButtonText: 'Great, show me the site!'
}).then((result) => {
  if (result.isConfirmed) {
    location="somewhereelse.html"
  }
})
        console.log("Form is correct and submitted");
        </script>
            <?
    



        }

      }
      
  }
  
$conn->close();

?>
  <!-- Modal content -->
 

<script>

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
var modal = document.getElementById("myModal");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

 function openpopup() {
   modal.style.display = "block";
  }



// When the user clicks on the button, open the modal


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// 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>

Advertisement

Answer

Manual

Swal.fire({
  title: 'Welcome to bottles beach',
  text: "You successfully submitted the form",
  icon: 'success',
  showCancelButton: false,
  confirmButtonColor: '#3085d6',
  confirmButtonText: 'Great, show me the site!'
}).then((result) => {
  if (result.isConfirmed) {
    location = "somewhereelse.html"
  }
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.6/dist/sweetalert2.all.min.js"></script>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement