jQuery event.preventDefault() Method
Last Updated :
11 Jul, 2025
Improve
The jQuery preventDefault() Method is used to stop the default action of the selected element to occur. It is also used to check whether preventDefault() method is called for the selected element or not.
Syntax:
event.preventDefault()
Parameter: It does not accept any parameter.
Example 1: This example uses preventDefault() method to stop to open the new link.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.preventDefault() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
body {
width: 50%;
height: 40%;
padding: 20px;
border: 2px solid green;
font-size: 20px;
}
</style>
<!-- Script to use event.preventDefault() method -->
<script>
$(document).ready(function () {
$("a").click(function (event) {
event.preventDefault();
alert("The required page will not be open");
});
});
</script>
</head>
<body>
<a href="https://www.geeksforgeeks.org">
Welcome to GeeksforGeeks!
</a>
</body>
</html>
<html><head> <title> jQuery event.preventDefault() Method </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <style> body { width: 50%; height: 40%; padding: 20px; border: 2px solid green; font-size: 20px; } </style> <!-- Script to use event.preventDefault() method --> <script> $(document).ready(function () { $("a").click(function (event) { event.preventDefault(); alert("The required page will not be open"); }); }); </script></head><body> <a href="https://www.geeksforgeeks.org"> Welcome to GeeksforGeeks! </a></body></html>Output:
Example 2: This example uses event.preventDefault() method to stop submitting the form.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
body {
width: 50%;
height: 40%;
padding: 20px;
border: 2px solid green;
font-size: 20px;
}
input {
width: 220px;
height: 30px;
border-radius: 10px;
}
</style>
<!-- Script to use event.preventDefault() method -->
<script>
$(document).ready(function () {
$("button").click(function (event) {
event.preventDefault();
alert("This form will not submit");
});
});
</script>
</head>
<body>
<input type="text" placeholder="enter name" />
<br><br>
<button>Submit </button>
</body>
</html>
<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <style> body { width: 50%; height: 40%; padding: 20px; border: 2px solid green; font-size: 20px; } input { width: 220px; height: 30px; border-radius: 10px; } </style> <!-- Script to use event.preventDefault() method --> <script> $(document).ready(function () { $("button").click(function (event) { event.preventDefault(); alert("This form will not submit"); }); }); </script></head><body> <input type="text" placeholder="enter name" /> <br><br> <button>Submit </button></body></html>Output:
