JavaScript: Catch Submit of Form

In this tutorial, I would like to show you how to catch a click on the submit button of an HTML form. A possible field of application would be checking the values a user has typed dynamically before submitting, for example for showing a message to the user if necessary.

I would like to present two different solutions for this. The first way is using pure JavaScript, the second solution works with jQuery.

The HTML Form

For the demonstration, we are using two simple forms. The first should illustrate the pure JavaScript way, the second the jQuery one.

<h1>JavaScript</h1>
<form id="form_js" method="post" action="">
  <input id="inp_js" type="text" value="">
  <input type="submit" value="Save">
</form>

<h1>jQuery</h1>
<form id="form_jquery" method="post" action="">
  <input id="inp_jquery" type="text" value="">
  <input type="submit" value="Save">
</form>

Both forms are consisting of one submit button and one text input field. In order to be able to address the forms out of the script later, we have applied the unique IDs "form_js" and "form_jquery" to the forms. Additionally, also the input fields each has a unique ID.

Script using pure JavaScript

First, we want to have a look at the pure JavaScript solution. After loading the entire page (window.onload), we are using document.getElementById() for defining an own OnSubmit-function for the form with the ID "form_js".

window.onload=function() {

   document.getElementById('form_js').onsubmit=function() {	
      if (document.getElementById('inp_js').value == '') {
         alert('Please fill in the field.');
         return false;  
      } else {
         return true;	  
      }  
   } 

}

This function is checking the value of the input field to see whether it is empty. If yes, a message box containing a warning is displayed and "false" is returned. This ensures that the field could not be submitted. However, if the field is containing some text, instead, we are turning "true" so that the form will be submitted.

Script using jQuery

The next code is leading to the same result. However, this time we are using jQuery. Again, our function should be set after the full HTML page is loaded. This can be done using $(document).ready() in the jQuery world.

$(document).ready(function() {	
			
   $('#form_jquery').submit(function(e){  
      if ($('#inp_jquery').val() == '') {
         e.preventDefault();  
         alert('Please fill in the field.');  
      }  
   });	
					   
});	

Afterwards, we catch the form submit with jQuery (form with the ID form_jquery). Again, we are checking at this point, whether our input field is containing a non-empty value. If not, again we are showing our warning notification and we are calling .preventDefault(). With this function, we can prevent the form submit.

Note

Checking a form with JavaScript can not substitute a check on the server site. JavaScript is useful to create some warning messages for the user. However, checking the values should always be done within the PHP script on the server. You have to keep in mind that JavaScript can be disabled and easily manipulated.