How to go from one html page to another using javascript

Easier method is window.location.href = "http://example.com/new_url";

But what if you want to check if username and password whether empty or not using JavaScript and send it to the php to check whether user in the database. You can do this easily following this code.

html form -

javascript validation-

function validateForm(){
    var uname = document.forms["myForm"]["username"].value;
    var pass = document.forms["myForm"]["password"].value;

    if((!isEmpty(uname, "Log In")) && (!isEmpty(pass, "Password"))){

        return true;
    }else{
        return false;
    }
}

function isEmpty(elemValue, field){
    if((elemValue == "") || (elemValue == null)){
        alert("you can not have "+field+" field empty");
        return true;
    }else{
        return false;
    }
}

check if user in the database using php

";
    }

    $uname_tb = $_POST['username'];
    $pass_tb = $_POST['password'];

    $query ="SELECT * FROM user";
    $result = mysqli_query($con,$query);

    while($row = mysqli_fetch_array($result)){
        if(($row['username'] == $uname_tb) && ($row['password'] == $pass_tb)){
            echo "Login Successful";
            header('Location: dashbord.php');
            exit();
        }else{
            echo "You are not in our database".mysqli_connect_error();
        }
    }
    mysqli_close($con);
?>


Learn how to redirect to another webpage using JavaScript.


Redirect a Webpage

There are a couple of ways to redirect to another webpage with JavaScript. The most popular ones are location.href and location.replace:

Example

// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");

Try it Yourself »

Note: The difference between href and replace, is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.



Redirect to another page on load

You can redirect a web page via JavaScript using a number of methods. If you want a cross-browser compliant JavaScript redirect script, better to use the following scripts.

example

You can use window.location object to load another page in JavaScript.

example

Difference between window.location and location.href

  1. window.location is an object that holds all the information about the current document location (host, href, port, protocol etc.).
  2. location.href is shorthand for window.location.href (you call location from global object - window, so this is window.location.href), and this is only a string with the full URL of the current website.

Other methods of JavaScript redirection

Assigns a new URL to the current window.

Replaces the location of the current window with the new one.

Sets the location of the current window itself.

Sets the location of the topmost window of the current window.


View Discussion

Improve Article

Save Article

  • Read
  • Discuss
  • View Discussion

    Improve Article

    Save Article

    In this article, we will know how to redirect the webpage to another using Javascript, along with understanding its implementation through the examples.

    There are several methods to redirect to another webpage using JavaScript. Some of them are listed below:

    • location.href: It is used to set or return the complete URL of the current page.
    • location.replace(): It is used to replace the current document with the specified one.
    • location.assign(): It is used for loading a new document.

    Syntax:

    location.href="URL"
          or
    location.replace("URL")
          or
    location.assign("URL")

    Parameters: It accepts a single parameter URL which is required. It is used to specify the reference of the new webpage.

    Return Value: No return value.

    Example 1: This example illustrates the use of the location.href property.

    HTML

    <html>

    <body>

        <h2>Welcome to GeeksforGeeksh2>

        <p>This is the example of <i>location.hrefi> way. p>

        <button onclick="myFunc()">Click mebutton>

        <script>

        function myFunc() {

        }

        script>

    body>

    html>

    Output: 

    How to go from one html page to another using javascript

    location.href Property

    Example 2: This is an example of a location.replace() method.

    HTML

    <html>

    <body>

        <h2>Welcome to GeeksforGeeksh2>

        <p>This is the example of <i>location.replacei> method. p>

        <button onclick="myFunc()">Click mebutton>

        <script>

        function myFunc() {

        }

        script>

    body>

    html>

    Output:

    How to go from one html page to another using javascript

    location.replace

    Example 3: This example uses the location.assign() method.

    HTML

    <html>

    <head>

        <title>Location assign() Methodtitle>

    head>

    <body>

        <h2>GeeksforGeeksh2>

        <h2>Location assign() Methodh2>

        <button onclick="load()">Click Here!button>

        <script>

        function load() {

        }

        script>

    body>

    html>

    Output:

    How to go from one html page to another using javascript

    location.assign

    NOTE: The output of all the methods will be the same but the location.replace() method removes the URL of the current document from the document history. Thus, it is good to use location.assign() method if you want the option to navigate back to the original document. 


    How do I switch from one HTML page to another?

    To redirect one HTML page to another page, you need to add a tag inside the section of the old HTML page.

    How can I change HTML page using JavaScript?

    Use window..
    Copy window. open(url, windowName, windowFeatures);.
    Copy function openGoogleByMethod() { window. open("https://www.google.com"); }.
    Copy window. location = URL_PATH; window. location. ... .
    Copy function openGoogle() { window. location = "https://www.google.com"; window..

    How do I redirect from one page to another?

    Approach: To redirect from an HTML page to another page, you can use the 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 pass a value from one page to another in JavaScript?

    There are two ways to pass variables between web pages. The first method is to use sessionStorage, or localStorage. The second method is to use a query string with the URL.