Enable custom alert

Question

I have through a tutorial come up with a custom alert design that I want to display on my index page after successful submission of a form. In the form-action page, I have set a number of conditions to be met before the form is submitted my last line if all conditions are met and form submitted, I want the user redirected to the index page with the dialog alert by redirecting like this header("Location: index.php?Success=true"); the custom alaert is as follows

 <!DOCTYPE html>
 <html>
 <head>
    <title> Trial</title>
 </head>

<style>
    #customAlert{
        display:none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background-color: rgb(255,255,255,0.75);
    }

    #box{
        border-radius: 5px;
        margin-top: 100px;
        margin-left:400px;
        height: 150px;
        width: 500px;
        text-align: center;
        box-shadow: 2px 2px 8px black;
        background-color: white;
    }

    .heading{
        background-color: #339966;
        color: white;
        font-size: larger;
        padding: 5px;
    }

    .content{
        margin-top: 30px;
    }

   #confirmbtn{
    height: 25px;
    width: 80px;
    border-radius: 8px;
    background-color: #339966;
    color: white;
    cursor: pointer;
    margin-top: 20px;
    margin-left: 400px;

</style>
 <body>





    <div id="customAlert">
        <div id="box">
            <div class="heading">
                This is custom alert
            </div>
            <div class="content">
                <p>You just clicke don show allert, hahaaa eeee</p>
                <button type="button" id="confirmbtn" onclick="hidealert()">OK</button>
            </div>          

        </div>  
    </div>
<div class="page-content">
<p> Some text and other contents</p>

</div>


<script>
    
var customAlert= document.getElementByID("customAlert");
function showcustom(argument) {
    customalert.style.display='block';
}

function hidealert(){
    customalert.style.display='none';
}

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

the display is none because I want it hidden first I am stuck on how to display the alert if Location: index.php?success=true

So check the url and show it.... https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — epascarello, Jun 09 '21 at 21:11

score 0 · Answer 1 · answered Jun 09 '21 at 21:21

You can read the params in the URL by reading the global $_GET array in PHP. In your case when you redirect you add the success key to the URL. You can read it like this:

$_GET['success']

So on the index.php page, use this key to get the value from the URL. Then, based on the value, determine wether to show the alert or not.

<?php
// Get the success param or null.
$success = $_GET['success'] ?? null;
if ($success === 'true') : ?>

  <div id="customAlert">
    <div id="box">
      <div class="heading">
        This is custom alert
      </div>

      <div class="content">
        <p>You just clicke don show allert, hahaaa eeee</p>
        <button type="button" id="confirmbtn" onclick="hidealert()">OK</button>
      </div>
    </div>
  </div>

<?php endif ?>

Change the styles so that the alert always displays. Let PHP decide if the alert should be on the page or not.

Enable custom alert

1 Answers1