In this article, we have a task. We have been given a form and we have to check whether the form has been submitted or not. We are simply checking if the form is submitted by using submit event.

Detect submit button is clicked or not 
 <form onsubmit="myFunction()">
   <input type="text" placeholder="Enter Your Name">
   <input type="submit" value="Sumit">
 </form>
 <script>
  function myFunction(){
   alert("Form Is Submitted!")
  }
 </script>
Try it Yourself »

In the second example, I shall check whether a form is submitted or not by using addEventListener

Check using addEventListener 
 <form id="my-form">
   <input type="text" placeholder="Enter Your Name">
   <input type="submit" value="Sumit">
 </form>
 <script>
  let myForm = document.querySelector('#my-form');
   myForm.addEventListener("submit",function(){
alert("Form Submitted");
});
 </script>
Try it Yourself »
Try to use, simply arrow function. Eg. myForm.addEventListener("submit",()=>{ alert("Form Submitted");)}

In the third example, let's see what users have written in the input field.

Check input value 
 <form onsubmit="myFunction(this)">
   <input type="text" id="name" placeholder="Enter Your Name">
   <input type="submit" value="Sumit">
 </form>
 <script>
  function myFunction(e){
  alert("Your Name Is " + e.name.value);
  }
 </script>
Try it Yourself »