jQuery event.preventDefault() method

As the name implies, the preventDefault() method prevents the occurrence of default action of the selected element. As an example, this method can stop a submit button from submitting a form, or it can prevent an anchor from following a URL. This method does not return a value.

Syntax

The preventDefault() method does not accept any parameters. The event mentioned in the above syntax is mandatory to be specified.

Let's understand the method by using some illustrations.

Example1

It is a simple example of using the preventDefault() method. In this example, we are using the event.preventDefault() method for preventing an anchor to follow the URL. When we try to click the given URL, the link will not work

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
  });
});
</script>
</head>
<body>

<h4> It is an example of using the event.preventDefault() method. </h4>
<p> Try to click the below link. The link will not follow the URL because the method will prevent the link to follow the URL. </p>

<a href = "https://www.javatpoint.com/"> javatpoint.com </a>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

Example2

It is another simple example of using the event.preventDefault() method. In this example, we are using the method to prevent the submit button from submitting an HTML form. Here, there is an HTML form including some textfields and buttons. There is a submit button that submits the data of the form. But when we try to click the submit button, the button will not work.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#s1").click(function(e){
    e.preventDefault();
  });
});
</script>
</head>
<body>

<h4> It is an example of using the event.preventDefault() method. </h4>
	<form id = "myForm" action = "#" style = "font-size: 20px;background: lightblue;" >
	<p> First Name: <input type = "text" id = "fname" /> </p>
	<p> Last Name: <input type = "text" id = "lname" /> </p>
	<p> E-mail Id: � <input type = "email"/> </p>
	<input type = "submit" id = "s1">
	<button type = "reset"> Reset </button>
	</form>
<p> Try to click the submit button. The button will not work because the method will prevent its default behavior. </p>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -