Skip to content
Related Articles

Related Articles

jQuery | event.preventDefault() Method
  • Last Updated : 20 Feb, 2019

The preventDefault() Method in jQuery is used to stop the default action of 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.

Return Value: It returns the selected element with the applied change.

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=
    </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>
        Welcome to GeeksforGeeks!
    </a>
</body>
   
</html>

Output:
Before Click on the link:

After click on the link:

Example 2: This example uses event.preventDefault() method to stop submitting the form.




<!DOCTYPE html>
<html>
   
<head>
      
    <script src=
    </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:
Before Click on the button:

After Click on the button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :