how to show div after clicking submit button for few seconds then disappear?

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">

Your code seems to work just fine. There are a few typos. Please have a look at the snippet I just edited. — Harun Yilmaz, Dec 24 '20 at 09:23
@ Harun Yilmaz thanks for your answer but my page when i click submit is reloading and i don't get the div massage, i have the submit code in if(isset($_POST['submit'])) {} any idea? — anna, Dec 24 '20 at 09:49
You can try `event.preventDefault()` for submit event of the `form` if you are using an XHR request with jQuery. — Harun Yilmaz, Dec 24 '20 at 10:01
@Harun Yilmaz but that would prevent my from being submitted — anna, Dec 24 '20 at 15:01
If you are using XHR request, you wouldn't want the form to submit and redirect to another URL. Please have a look at this thread: https://stackoverflow.com/questions/20352799/ajax-form-submit-with-preventdefault — Harun Yilmaz, Dec 24 '20 at 19:40
in this case i would have to change my whole code to use ajax thanks for your help but it is difficult for my case i have no time to make big changes to my sit, i will try to find a faster solution @Harun Yilmaz — anna, Dec 24 '20 at 19:52

Vlad Brezitskiy · Answer 1 · 2020-12-24T10:02:15.167

0

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; ?>

edited Dec 24 '20 at 10:02

answered Dec 24 '20 at 09:17

Vlad Brezitskiy

34
3

i have if(isset($_POST['submit'])) {here i do my stuff insert things to my database and whatever } where i should put these things in your code now? @Vlad Brezitskiy – anna Dec 24 '20 at 09:30
While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/low-quality-posts/27923146) – double-beep Dec 24 '20 at 09:43
@Vlad Brezitskiy but if i prevent my form from being submitted how i would get my information to my database – anna Dec 24 '20 at 15:05
form will be submitted, in code above I look through the form element and trigger submit with this data – Vlad Brezitskiy Dec 25 '20 at 07:43

how to show div after clicking submit button for few seconds then disappear?

1 Answers1