Can onclick event in javascript be called after submission?

Question

I have a form that should be filled by the user. After filling the form the pieces of information should be sent to the database, and then a success message should arise in the same page.

But the problem is when I try to use the 'click' event in javascript on the submission button it will execute the function I asked for and show the success message but it will stop the data from being sent to the database, it's like it's changing the original behavior of the submit button.

And what made things harder is that I've been trying to do all of these things on one page which means even if the form if successfully submitted we should be redirected to the same page. Can someone suggest a solution? here's the php code:

<div class="container ml-5" id="parentcreateUser">
        <span style="text-decoration:underline;" id="spantext"><b>Veuiller remplir le formulaire ci-dessous pour ajouter un utilisateur </b></span> <br><HR>
        <form class="row" method="post" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?> id="main_form">
            <div class="col-lg-8">
                <div class="form-group">
                    <label >Role : </label>
                    <input type="text" class="form-control" name="role" required>
                </div>
                <div class="form-group">
                    <label >Nom : </label>
                    <input type="text" class="form-control" name="nom" required>
                </div>
                <div class="form-group">
                    <label >Prenom : </label>
                    <input type="text" class="form-control" name="prenom" required>
                </div>
                <div class="form-group">
                    <label >Nom d'utilisateur : </label>
                    <input type="text" class="form-control" name="nomutilisateur" required>
                </div>
                <div class="form-group">
                    <label >Adresse email : </label>
                    <input type="email" class="form-control" aria-describedby="emailHelp" name="adresseemail" required>
                </div>
                <div class="form-group">
                    <label>Mot de passe :</label>
                    <input type="password" class="form-control" name="mdp" required>
                </div>
                <button type="submit" class="btn btn-outline-primary float-right" name="submit">Envoyer</button>
            </div>
        </form>
        <?php
            require 'user__bd.php';
        ?>   

        <?php

        if(isset($_POST['submit'])){
            $role=$_POST['role'];
            $nom=$_POST['nom'];
            $prenom=$_POST['prenom'];
            $nomutilisateur=$_POST['nomutilisateur'];
            $adresseemail=$_POST['adresseemail'];
            $mdp=md5($_POST['mdp']);

            $user=new User($role,$nom,$prenom,$nomutilisateur,$adresseemail,$mdp);
            $user->CreateUser();    
        }
        ?>
    </div>

and here's the javascript linked to it:

var parentEl=document.querySelector('#parentcreateUser'),
    divEl=document.createElement('div');

var h4El=document.createElement('h4'),
    h4Text=document.createTextNode('Opération Réussi!');
h4El.appendChild(h4Text);
h4El.classList.add('alert-heading');

var pEl=document.createElement('p'),
    pText=document.createTextNode('un utilisateur a été ajouté à la base de donné du site');
pEl.appendChild(pText);


divEl.appendChild(h4El);
divEl.appendChild(pEl);
divEl.classList.add('alert');
divEl.className+=' alert-success';
divEl.setAttribute('role',"alert");
divEl.style.width='640px';

let createUserSuccess=function()
{
    var spanEl=document.getElementById('spantext'),
        formEl=document.getElementById('main_form');
    spanEl.remove();
    formEl.remove();
    parentEl.appendChild(divEl);
}

var btnEl=document.getElementsByName('submit')[0];
console.log(btnEl);

btnEl.addEventListener('click',createUserSuccess);

Note that I'm trying to get things done in the following order:

1. form submission and data sent to the database successfully
2. redirection to the same page of the submission
3. executing the javascript and therefore removing the form from the page or replacing it with a success message

Answer 1

Given your current situation:

1. Load page A with a <form>
2. Submit form
3. Load page B with the result of submitting the form

Then JavaScript on page A (which the click event would be) cannot run after step 3: It's a different page.

You can include a <script> element in page B that just runs your function without waiting for any event.

        $user->CreateUser();    
        ?>
        <script> createUserSuccess(); </script>
        <?php
    }

---

You could also use Ajax which would change the flow to:

1. Load page A with a <form>
2. Run JavaScript that collects the data the user entered into the form on the click event
3. Make an HTTP request with JavaScript's XMLHttpRequest or fetch object
4. Run your function in response to the load event on the XHR object

Answer 2

Try to add

event.preventDefault();

to your createuserSuccess function. Default behavior of a submit is doing a refresh, so if this happens before your php script finishes it might cause unexpected behavior.

Answer 3

You need to submit the form in function createUserSuccess

but first change button type = "button" so that it will not be submitted twice

document.getElementById("main_form").submit();

then remove form and then show success message