jQuery event.PreventDefault

By: Rajesh P.S.

The event.preventDefault() method in jQuery is used to prevent the default action associated with an event. It is commonly used with event handlers like click, submit, or keypress to stop the default behavior that would normally occur when the event is triggered. This can be useful when you want to override the default action and implement custom functionality.

Syntax:

event.preventDefault();

Preventing a Form Submission

Suppose you have an HTML form like this:

<form id="myForm"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <button type="submit">Submit</button> </form>

Continue Reading...

You can use jQuery to prevent the form from being submitted when the submit button is clicked:

$("#myForm").submit(function(event) { event.preventDefault(); // Prevent the default form submission // Custom logic here, e.g., AJAX request or form validation });

In this example, when the form is submitted, the event.preventDefault() line stops the default form submission, allowing you to implement your own custom logic, such as performing form validation or sending data via an AJAX request.

Common Use Cases:

Preventing form submissions and handling data validation before submission.
Stopping hyperlinks from navigating to new pages when clicked.
Disabling the default action of keypress events to implement custom keyboard shortcuts.

Conclusion

The event.preventDefault() is a fundamental method for controlling event behavior in jQuery, enabling you to customize how events are handled and interact with your web page's functionality.

Next > Difference between event.PreventDefault and event.stopPropagation?

Related Topics

More Related Topics.....