After successful login redirect to page in javascript

What is Page Redirection ?

You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

Table of Contents Show

What is Page Redirection ?
How Page Re-direction Works ?
How do I redirect a specific page after login?
How do you get to the next page after successful login in HTML?
How do I redirect a webpage using JavaScript?
How do you redirect to another page in HTML After submit?

There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −

You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.
You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your server-side page redirection, you can use client-side page redirection to land your users on the appropriate page.
The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine, it could lead your site to get banned.

How Page Re-direction Works ?

The implementations of Page-Redirection are as follows.

Example 1

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

Output

Example 2

You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

Output

You will be redirected to tutorialspoint.com main page in 10 seconds!

Example 3

The following example shows how to redirect your site visitors onto a different page based on their browsers.

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>

HTML DataPages, when used as Standalone Sign-in Screens, can be a great asset for authenticated apps. Not only can they be placed directly on the homepage providing a single point of sign-in, but you can also customize where the user will be directed based on data stored in their user profile. For instance, depending on the role a user can be redirected to admin, manager or employee interface. This article shows some examples of popular redirection techniques using an HTML DataPage, authentication parameters and sample JavaScript.

Redirect based on user type

The most common redirect is based on user type. For example, if the user is an administrator the user is directed to the admin dashboard/portal/interface. If the user is a manager, then the user is directed to the manager dashboard/portal/interface.

Steps:

Create or edit the users table used in authentication. It needs to have two Yes/No fields, Admin and Manager, which stores Yes or No values based on the user’s permission in this application.

Note: There’s no need of an additional checkbox for Employees. They’re going to be routed to their account if they’re active inside the users table.

Identify how many users groups an application will have and create that many views to filter data. In this example, there are three user levels, so we’ll need to create three separate views that filter based on user type and status checkbox.

Create authentications based on the views.

- Make sure to include the “logout destination” and “time out & redirection” links in the Advanced Settings.
- Make sure to enable Enable auto-login checkbox.

Create an HTML DataPage and restrict access to the DataPage via authentication. Make sure that advanced features and parameters are enabled.

1. Copy and paste the following JavaScript sample into your HTML DataPage.
2. Replace the parameter name and values to match your app. You can duplicate the else if section as many times as necessary to accommodate the number of user groups in your app.

In this example we see there are three user group types: Admin, Manager and Employee. If user type is admin, user will be redirected to admin.html page and if a user type is manager, user will be redirected to manager.html page. Lastly, if users are neither the Admin nor the Manager, they will be redirected to the employee.html site.

Redirect based on subscription date

You can redirect users based on their subscription date or date of last confirmed payment. Using this method, past due users can be automatically directed away from protected areas of your app and towards payment information. In this scenario, your users table should contain the Last_Payment field which stores the last payment date for each user. Create an HTML DataPage similar to the one explained above, then copy the following JavaScript sample into your HTML DataPage. In this example, if the user’s last confirmed payment was received more than 30 days ago, the user will be directed to a payment page. This same basic system can also be used to direct users who haven’t logged in for extended periods of time, or who are signing in for the first time after the site has undergone functional changes.

Redirect the first time a user signs in

It is sometimes helpful to direct first-time users to a special orientation or training page. For this method, your user profile (table) must contain a Yes/No field. In this example, the Yes/No field is Finished_Training. Using a Single Record Update Form with this Yes/No type field will allow you to display important information to new users and allow them to skip this screen when they become more comfortable. In this example new users are directed to “training.html” where they are presented with training information and checkbox saying “Don’t show this screen again”. This training page will appear every time they login until they click the checkbox.

To redirect users to a specific page after login, you can simply add the redirect URL parameter in login form Shortcode. The redirect_url parameter allows you to redirect to a certain page after the user is logged in.

Approach: To redirect from an HTML page to another page, you can use the <meta> tag by specifying the particular link in the URL attribute. It is the client-side redirection, the browsers request the server to provide another page.

How do I redirect a webpage using JavaScript?

There are several methods to redirect to another webpage using JavaScript..

href: It is used to set or return the complete URL of the current page..

replace(): It is used to replace the current document with the specified one..

assign(): It is used for loading a new document..

How do you redirect to another page in HTML After submit?

If you want to redirect to another page after form submit html, Then you have to provide/Sign the Other pages path inside HTML Form tag's ACTION Attribute. Which will POST/Send your Form data to that Location and Open/Redirect your Users to That Given Web Page.