单击提交按钮几秒钟后如何显示div然后消失？

Question

i have a submit button now i want to add onclick function to it to show a div tells the user the submission succeeded but for now i am getting no result i think because after submission the page reloads is there a way to turn around it?

 function myFunction() { var x = document.getElementById("snackbar"); x.className = "show"; setTimeout(function() { x.className = x.className.replace("show", ""); }, 3000); }

 #snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

 <div id="snackbar">Some text some message..</div> <input type="submit" name="submit " onclick="return myFunction();" value="confirm">

Answer 1

You can prevent form submit event and call your function inside it

// Your function to display text inside div
function myFunction() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

const form = document.querySelector('#form');
// find elements of form if exists
const elements = document.querySelectorAll('#form input');
// create form data object which will has your form inputs data
const formData = new FormData();

form.addEventListener('submit', (e) => {
  e.preventDefault(); // prevent event
  
  myFunction(); // call your function to display text
  
    // if elements exists append them to formData
    if (elements) {
        elements.forEach(el => {
            formData.append(el.name, el.value)
        })
    }
    
    // submit form
    form.submit();
    
})

Also you can can pass some value after user submitted form and page reloaded and print html by this value using php if condition

<?php if ($condition): ?>
    <div id="snackbar">Some text some message..</div>
<? endif; ?>