how to stop a button from reloading a apge

How To Stop A Button From Reloading Page

Have you ever designed a cool form and every thing looks beautiful except that a button keeps reloading your page? Learning  JavaScript usually comes with whole lots of challenges which might actually annoy you at the beginning, but that should not be a reason to quit as there must always be a way out. A very common challenge in JavaScript is the constant reloading of a page when a button is been clicked. you may be asking yourself if there are some kinds of bugs in your code that is actually making the page to reload on clicking a button. You can spend all day looking for where the bug is coming from, but sometimes or most time you will not even find one. This constant refreshing of your webpage  when a button is clicked is usually cause by the default event attached to buttons.

To prevent the button from reloading the page, you need to add a built-in function which prevent the default event applied on the button. Below is a working code to prevent the default operation on links.

Supposed these are the buttons in your webpage

<button>default</ button >

< button>continue</ button >

< button>return</ button >

And just to make buttons look good, lets add the following css

div {

  border: 2px solid green;

  height: 300px;

  width: 300px;

  padding: 10px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  background-color: saddlebrown;

  border-radius: 12px;

}

button {

  padding: 5px 8px;

  color: white;

  width: 150px;

  background-color: orange;

  outline: none;

  border: 2px solid gray;

  border-radius: 15px;

  box-shadow: -2px -2px 0px #ffffff;

  transition: 0.8s linear all;

  cursor: pointer;

}

button:hover {

  color: orange;

  background-color: black;

  box-shadow: none;

}

Your result should be like this

default button reloading page
click the image to learn how to design responsive form

To prevent all the buttons from reloading the page

Add the following code in your JavaScript file

//here you are selecting the a tag which is used to create buttons and //assigning it to a variable “button”

 var button = document.querySelectorAll(“button”);

//next you add an eventlistener, in this case it is a click event, //because the page refresh only when the button is clicked, you will //also need to create a function, here the function created //is “stopRefresh”

 button.addEventListener(“click”, function (stopRefresh) {

// then you add the built-in function “preventDefault”

stopRefresh.preventDefault();

 });

However, you may wish to apply this prevent default method to only a particular button, then you can add a class to the button and apply the code below

Preventing only a particular button from reloading page

<button>default</ button >

< button class=”prevent”>continue</ button >

< button>return</ button >

//here you are selecting a particular button using a class”

 var button = document.querySelector(“.prevent”);

//next you add an eventlistener, which is also a click event,since the //page refresh only when the button is clicked, you will also need to //create a function, here the function created is same as the first //one “stopRefresh”

 button.addEventListener(“click”, function (stopRefresh) {­­­­­­

// then you add the built-in function “preventDefault”

stopRefresh.preventDefault();­­­­­

 }); This code has actually help to prevent the constant refreshing of a page when a particular button is clicked, but I did like to point it out that, this is not the only method to solve such problem as there might  be other method(s)­­­­­­­

Leave a Comment

Your email address will not be published. Required fields are marked *