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

Question

我现在有一个提交按钮，我想向它添加 onclick 功能以显示一个 div 告诉用户提交成功但现在我没有得到任何结果，我认为因为提交后页面重新加载是否有办法转身吗？

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

您可以阻止表单提交事件并在其中调用您的函数

// 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();
    
})

您还可以在用户提交表单和页面重新加载后传递一些值，并在条件下使用 php 通过该值打印 html

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