How to Redirect from One page to Another in HTML on Button Click?

Introduction

Let's say you are designing an e-commerce website. A user lands on the log-in screen and fills in their details. What do you think will happen once the system verifies their credentials? You need to redirect them to their dashboard screen.

Redirect means changing the URL and web page. For example, let's say you are currently browsing a current page of a website having URL example.com/page-a. Now, let's say you click a link or button and transfer to another web page of the same website having URL example.com/page-b. This is called redirecting. It is widely used on a website.

Add an Image depicting redirecting in HTML from one page to another. Sample Image

There are several ways in which you can redirect a user:

• The user can initiate redirecting in several ways.
• They can be redirected by clicking on a button or clicking on a link.

In this article, we will explore several ways on who to redirect from one page to another in HTML on a button click.

Redirect using HTML Form Tag

The first way through which you can redirect from one page to another is by clicking a button. You can use a form for this purpose. The form tag in HTML has an attribute action where you can give the URL of the webpage where you want the form button to redirect. The form tag also has another attribute method. Just set the method attribute to POST, which means you are sending the data, and mention the URL in the action attribute. Once you submit the form, it will redirect you to the particular URL and webpage corresponding to that URL.

Syntax:

Code:

Output

Form tags are widely used when you wish to submit user data to the backend, such as during sign-up or log-in.

Redirect using HTML Anchor Tags

If you wish to redirect the user, then you can use the good old anchor tags in HTML. All you need to do is provide the reference or URL of the webpage you need the user to redirect.

Syntax

Code:

Output

Using location.href and location.replace

Apart from using HTML, you can also use Javascript to redirect users to your website. Javascript provides pre-built functions that one can use for redirecting. You can use location.href and location.replace to redirect the user from one page to another.

Syntax

You can add an event listener such as onClick to simulate a button click for redirecting. The location.replace function replaces the current URL with the one you provide, while the location.href creates a link between two pages. This means that once you click on a button that redirects using replace function, you cannot navigate back to the original document using the back button.

Code:

Output

Redirect to Another Page after Form Submit HTML

If you want the user to be redirected after they have submitted their details, then you can use form tags. The attributes of form tags action and method can be used to achieve this. The action attribute specifies the path to which the URL will be redirected once the form is submitted. The method attribute specifies the HTTP method that needs to be used when submitting the form.

After you have filled out the form and clicked submit, then you will be redirected to the dashboard section of the website.

How to Redirect to Another Web Page Using jQuery or JavaScript?

The window.location.href and window.location.replace functions can be used in JQuery as well. You can add an event listener to an element in HTML. Then, you can use the location.href or location.replace method for redirecting.

Code:

Output

In the above code, you have added the event Listener click that will activate when you click on the button. It will activate the function redirectFunction that will use location.href function to redirect to another page.