How can I show a Toast notification on form submission

Question

so i have a form for adding users I want to put a toast notification on form submission

public function add_user()
    {
        if(isset($_POST['add_user']))
        {

            $fullname = $_POST['fullname'];
            $username = $_POST['username'];
            $password = $_POST['password'];
            $access = $_POST['access'];

            if($this->check_user_exist($username) == 0)
            {
                $connection = $this->openConnection();
                $stmt = $connection->prepare("INSERT INTO users_tbl(`fullname`, `username`, `password`, `access`, `date_added`) VALUES(?,?,?,?,now())");
                $stmt->execute([$fullname, $username, $password, $access]);

                echo header ("Location: users.php");
            }else{

              echo ("User already exist!");
              echo header ("Location: users.php"); 
        }
            
        }
    }

and I just call it in the beginning of the form so that when the user click the button save it will call the function

    <?php
    require_once('db/opms_db.php');
    $users=$store->getUsers();
    $store->add_user($_POST);
    $store->update_user($_POST);
    $store->delete_user($_POST);
    $userdetails = $store->get_userdata();
    
    if(isset($userdetails)){
      if($userdetails['access'] !="Admin"){
            header("Location: login.php");
        }
    }else{
        header("Location: login.php");
    }

?>

I am new to php can somebody help me how to use toast notification and how can i call it? thank you so much

You will want to read up on PHP [sessions](https://www.php.net/manual/en/session.examples.basic.php). — Kim Hallberg, Dec 15 '21 at 04:10

score 0 · Answer 1 · answered Dec 15 '21 at 05:01

You should use JavaScript for this task.

1. Listen for form submit event
2. Prevent this event
3. Show toast
4. After some timeout show submit it

Example:

<form method="POST" action"..." id="my_form">
   <!-- Code inside your form -->
</form>

(() => {
   let show_in = 3; // sec.
   let toast_shown = false;

   document.getElementById('my_form')
   .addEventListener('submit', function(){
      if(toast_shown) return;
      toast_shown = true;

      event.preventDefault();
 
      // your code to display toast

      setTimeout(this.submit, show_in * 1000)
   })
})();

BUT: If you want to add user and then display toast (for example with status of user creation) you need to know about AJAX/XMLHttpRequest/fetch or/and RestAPI

How can I show a Toast notification on form submission

1 Answers1