title: Redirect to a web page when a user clicks on the ok button of the sweet alert
body: <p>I am using sweet alert (<a href="https://sweetalert2.github.io/" rel="nofollow noreferrer">https://sweetalert2.github.io/</a>) to pop up a success alert after a registration in this way:</p>
  <pre><code>    &lt;script&gt;
      swal('Registration was successful',
      'Welcome to bottles beach',
      'success');
      console.log(&quot;Form is correct and submitted&quot;);
      &lt;/script&gt;
  </code></pre>
  <p>But <strong>I don't know why if I use this other way the sweet alert doesn't work:</strong></p>
  <pre><code>  &lt;script&gt;
    Swal.fire({
    icon: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '&lt;a href&gt;Why do I have this issue?&lt;/a&gt;'
  })
   &lt;/script&gt;
  </code></pre>
  <p><strong>I want that if a user clicks on ok, he will be redirected to another web page</strong>, 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 &quot;ok&quot; button;
  Anyone know how I should do it?</p>
  <p>i use this library version: <a href="https://unpkg.com/sweetalert/dist/sweetalert.min.js" rel="nofollow noreferrer">https://unpkg.com/sweetalert/dist/sweetalert.min.js</a></p>
  <p><em>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?</em></p>
  <p>Complete code:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Bottles Beach - Send your bottles&lt;/title&gt; &lt;!--Bottles Island--&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt;
  
  &lt;!--sweet alert lib--&gt;
  &lt;script src=&quot;https://unpkg.com/sweetalert/dist/sweetalert.min.js&quot;&gt;&lt;/script&gt;
  
  
  
  
  &lt;style&gt;
  
  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%;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div class=&quot;topnav&quot; id=&quot;myTopnav&quot;&gt; 
    &lt;a href=&quot;index.php&quot;&gt;Send a Bottle&lt;/a&gt;
    &lt;a href=&quot;bottles.php&quot; class=&quot;active&quot;&gt;Bottles&lt;/a&gt;
    &lt;a href=&quot;cht.php&quot; &gt;Chat&lt;/a&gt;
    &lt;a href=&quot;about.php&quot;&gt;About&lt;/a&gt;
    &lt;a href=&quot;donate.php&quot;&gt;Donate&lt;/a&gt;
    &lt;a href=&quot;javascript:void(0);&quot; class=&quot;icon&quot; onclick=&quot;myFunction()&quot;&gt;
    &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;br&gt;
    &lt;div class=&quot;grandParentContaniner&quot;&gt;
      &lt;div class=&quot;parentContainer&quot;&gt;
        &lt;div class=&quot;form_login&quot;&gt;
          &lt;form method=&quot;post&quot; action=&quot;&lt;?php echo $_SERVER['PHP_SELF'];?&gt;&quot;&gt; 
            &lt;h1 style=&quot;margin-bottom: 10%; color: #333333&quot;&gt;Sign-in&lt;/h1&gt;   
            &lt;hr width=&quot;100%&quot; style=&quot;color: black&quot;&gt; &lt;br&gt;
            &lt;input type=&quot;input&quot; name=&quot;username&quot; class=&quot;input&quot; placeholder=&quot;insert your username&quot;&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type=&quot;input&quot; name=&quot;e-mail&quot; class=&quot;input&quot; placeholder=&quot;insert your e-mail&quot;&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type=&quot;input&quot; name=&quot;password&quot; class=&quot;input&quot; placeholder=&quot;retype your password&quot;&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type=&quot;input&quot; name=&quot;rtpassword&quot; class=&quot;input&quot; placeholder=&quot;insert your password&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type=&quot;submit&quot; class=&quot;btnstyle&quot; value=&quot;Sign in&quot;&gt;
          &lt;/form&gt;
          &lt;a href=&quot;login.php&quot;&gt;&lt;button class=&quot;btnstyle&quot;&gt;Log-in&lt;/button&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   
  
    
    &lt;?php
  
    //Connect To Database
    
    $username=&quot;&quot;;
    $password=&quot;&quot;;
    $dbname=&quot;&quot;;
    $name =&quot;&quot;;
    $hour =date('H:i');
    $insert = &quot;&quot;;
    $cont = 0;
    $dt = date(&quot;Y-m-d&quot;);
  
  $conn = new mysqli($hostname,$username, $password, $dbname); 
    if ($conn-&gt;connect_error) {
    die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);
  }
  
    /*
    
    */
    
   
  
    if($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot;){
  
       
        $username = $_POST[&quot;username&quot;];
        $email = $_POST[&quot;e-mail&quot;];
        $password = $_POST[&quot;password&quot;];
        $rtpassword = $_POST[&quot;rtpassword&quot;];
        $nook = false;
        $errsameuser = false;
  
        $queryy = &quot;SELECT username FROM users&quot;;
        $result = $conn-&gt;query($queryy);
        
        if ($result-&gt;num_rows &gt; 0) 
        {
          //output data of each row
        while($row = $result-&gt;fetch_assoc()) 
         {
          if( $row[&quot;username&quot;] == $username){  //username already exist
              $errsameuser = true;
      }
    }
   }
  
        
  
        if($password == $rtpassword){ //pssw e conferma pssw enno uguali
          
          ?&gt;
          &lt;script&gt;
          console.log(&quot;password 1 and 2 match&quot;);
          &lt;/script&gt;
          &lt;?
  
          if(strlen($password) &lt; 8)
            $nook = true;
          
          if(!preg_match(&quot;#[a-z]+#&quot;, $password) ) //pssw must cointain at least  lower word
           $nook = true;
           
           if(!preg_match(&quot;#[A-Z]+#&quot;, $password) ) //pssw must cointain at least upper word
           $nook = true;
           
          if ( !preg_match(&quot;/[\'^£$%&amp;*()}{@#~?&gt;&lt;&gt;,|=_+!-]/&quot;, $password) )  //pssw must cointain at least special character
           $nook = true;
           
          if ( !preg_match(&quot;#[0-9]+#&quot;, $password) )  //pssw must cointain at least number
          $nook = true;
          
  
  
          if($nook){
              ?&gt;
          &lt;script&gt;
          console.log(&quot;but password not ok&quot;)
          &lt;/script&gt;
              &lt;?
          }
  
          if($errsameuser){
            ?&gt;
          &lt;script&gt;
          swal('This username already exists',
          'Please choose a new username',
          'error');
          &lt;/script&gt;
          &lt;?
          }
  
         
  
          else{
              $query = &quot;INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')&quot;;
              $result = $conn-&gt;query($query);
       ?&gt;
          
          &lt;script&gt;
          Swal.fire({
    title: 'Welcome to bottles beach',
    text: &quot;You successfully submitted the form&quot;,
    icon: 'success',
    showCancelButton: false,
    confirmButtonColor: '#3085d6',
    confirmButtonText: 'Great, show me the site!'
  }).then((result) =&gt; {
    if (result.isConfirmed) {
      location=&quot;somewhereelse.html&quot;
    }
  })
          console.log(&quot;Form is correct and submitted&quot;);
          &lt;/script&gt;
              &lt;?
      
  
  
  
          }
  
        }
        
    }
    
  $conn-&gt;close();
  
  ?&gt;
    &lt;!-- Modal content --&gt;
   
  
  &lt;script&gt;
  
  function myFunction() {
    var x = document.getElementById(&quot;myTopnav&quot;);
    if (x.className === &quot;topnav&quot;) {
      x.className += &quot; responsive&quot;;
    } else {
      x.className = &quot;topnav&quot;;
    }
  }
  var modal = document.getElementById(&quot;myModal&quot;);
  
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName(&quot;close&quot;)[0];
  
   function openpopup() {
     modal.style.display = &quot;block&quot;;
    }
  
  
  
  // When the user clicks on the button, open the modal
  
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
    modal.style.display = &quot;none&quot;;
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = &quot;none&quot;;
    }
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>