0 0 Votes

JavaScript: Catch Submit of Form

Tutorial by Stefan Trost | 22/10/2016 at 12:06

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.

ReplyPositiveNegative

About the Author

Avatar AuthorYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile | Message

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.