stop page reload to show result in javascript and jquere method stops the default action of an element from happening

How to Stop Page Reload to Show Result in JavaScript and jQuery Method

If you are working with JavaScript or jQuery, you might have come across a situation where you want to prevent the default action of an element from happening. For example, when you click on a submit button, the form gets submitted and the page reloads. But what if you want to show the result on the same page without reloading it? In this case, you need to use a method to stop the page from reloading.

JavaScript Method

In JavaScript, you can stop the page from reloading by using the preventDefault() method. This method is used to prevent the default action of an element from happening. For example, if you want to stop the form from submitting and show the result on the same page, you can use the following code:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // Your code here to show result
});

In this code, we are using addEventListener() method to add an event listener to the form submit event. The event.preventDefault() method stops the form from submitting and allows you to show the result on the same page.

jQuery Method

In jQuery, you can stop the page from reloading by using the preventDefault() method as well. The syntax is slightly different. Here's an example:

$('form').submit(function(event) {
  event.preventDefault();
  // Your code here to show result
});

In this code, we are using the submit() method to attach the submit event to the form. The event.preventDefault() method stops the form from submitting and allows you to show the result on the same page.

Conclusion

Both of these methods are useful when you want to stop the page from reloading and show the result on the same page. However, the syntax is slightly different in JavaScript and jQuery. You can choose whichever method you are comfortable with and get the same result.