I want to add popup message using div

  html, javascript, jquery, php

I want to show 2 of this when success or error, however when I try it it just don’t run after post because when i hit submit changes it reloads the browser.

I want to print a div that contains that messages after POST even the web reloads after submitting it.

enter image description here

<div id="messageSuccess" class="alert alert-success alert-dismissible show fade">
    <div class="alert-body">
        <button class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
            Congrats, Settings successfully updated! You may required to relogin to see the changes [<a style="color: #0E880B;" href="/logout">Logout</a>].
    </div>
</div>         
  
<div id="messageFailed" class="alert alert-danger alert-dismissible show fade">
    <div class="alert-body">
        <button class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
            Oh no, Settings failed to update! Please try again later.
    </div>
</div>     
<?php

require_once '../db_conn.php';
$userid = $_SESSION['user_id'];
$urlImgur = $_GET['urlAvatar'];
if (isset($_POST["changeAvatar"])){
    $sql = "UPDATE users SET `imgur`='$urlImgur' WHERE `user_id`='$userid'";
    $statement = $conn->prepare($sql);
    if ($statement->execute()) {     
        //I use this method before, but link very messy I want a clean error,
        //like other website throwing error with popup
        //header("Location: /user/settings?success-settings=Successfully Updated!");
        echo '<script type="text/javascript">
        var element = document.getElementById("messageSuccess");
        element.classList.remove("no-display");
        </script>'                           
    }
    else {
        //header("Location: /user/settings?error-settings=Error Updating!");
        echo '<script type="text/javascript">
        var element = document.getElementById("messageFailed");
        element.classList.remove("no-display");
        </script>'
    }
    $conn = null;
    $sql = null;
}
?>

Source: Ask PHP

LEAVE A COMMENT