A Quick guide to Javascript event.preventDefault() Method for Beginners
HTML Elements have a default action which they perform when a certain event is triggered by the user such as form submission or clicked on a link that redirects to another web page.
But in some cases, we need to stop these default actions so that we can perform additional operations on them in javascript for this we use preventDefault() Method.
Javascript preventDefault() the method stops the execution of the primary actions related to any DOM(Document Object Model) element. Such as to stop going to another URL when clicked on the anchor/link tag or cancel the form submit when the submit button is clicked are some of the common use cases of
preventDefault() the method.
Syntax
event.preventDefault();
Table of Contents
preventDefault() on anchor tag
There are times where we would like to display some content or show modal to users and that too using HTML anchor tag.
Then we can stop the default execution of the anchor tag by adding the event onclick method.
<a id="my_link" onclick="stop_link()" href="https://www.google.com/">Go to Google.com</a>
<script>
function stop_link(){
event.preventDefault();
alert("Link click stopped from going to google.com.");
}
You can also use addEventListener() method to attach an event to any element. This also works
document.getElementById('my_link').addEventListener('click', function(){
event.preventDefault();
alert("Link click stopped from going to google.com.");
});
preventDefault() while form submission
<html>
<head>
<title>JS</title>
</head>
<body>
<form onsubmit="save_form()" action="" method="post">
<label for="">Name</label>
<input type="text" name="name" id="">
<input type="submit" name="submit" value="Submit" >
</form>
<script>
function save_form(){
event.preventDefault();
alert("Form Submission has been stopped.");
}
</script>
</body>
</html>
The event object points to the submitted form which triggers save_form() function. This function calls .preventDefault() method on event an object which in this case is formed.
If you don’t want to onsubmit() function on my_form then you can add submit event using addEventListener() method.
document.getElementById('my_form').addEventListener('submit', function(){
event.preventDefault();
alert("Form Submission has been stopped.");
});
Conclusion
So it’s time to say bye we have come to the end of our post on Quick guide to Javascript event.preventDefault() Method for Beginners.If you like our content then please do share it and comment to clarify your doubts.
Related Posts
- Learn Javascript Object.is() method for Beginners
- Javascript Object.fromEntries() Method – Convert Array of Key-Value pair into an Object
