Given a URL, the task is to use the current address of the page and to perform an operation using this address.
Example 1: This example points to the same URL and only redirects to the same address.URL = ‘https://gitstr.herokuapp.com’
<!DOCTYPE html> <html lang="en"> <head> <title>Example 1:</title> </head> <body bgcolor="white" ;> <div class="loginbox"> <img class="avatar"> <h1>GitStar</h1> <br> <form id="todoInputForm"> <div class="avatar"></div> <p>Username</p> <input type="text" placeholder="Enter your Github Username" class="input-username" id="login" /> <input type="submit" id="searchbtn name=" value="Search" /> <a href= Forgot your Username </a> <br> <br> </form> </div> <script> $(document).ready(function () { $('#todoInputForm').submit(function (e) { e.preventDefault() var input = $('#login').val() window.location.href = '/' }) }) </script> </body> </html> |
Output:
-
Before clicking on the Search button: Search
-
After clicking on the Search button:
as you can see after clicking the search button the URL doesn’t change because of line 38: window.location.href = ‘/’.
Example 2: In this example we would like to use window.location.href property
to point to some other address, so let’s see how it works.
<!DOCTYPE html> <html lang="en"> <head> <title>Example 2:</title> </head> <body bgcolor="white" ;> <div class="loginbox"> <img class="avatar"> <h1>GitStar</h1> <br> <form id="todoInputForm"> <div class="avatar"></div> <p>Username</p> <input type="text" placeholder="Enter your Github Username" class="input-username" id="login" /> <input type="submit" id="searchbtn name" value="Search" /> Forgot your Username </a> <br> <br> </form> </div> <script> $(document).ready(function () { $('#todoInputForm').submit(function (e) { e.preventDefault() var input = $('#login').val() window.location.href = '/' + input; }) }) </script> |
Output:
-
Before clicking on the button: Search
-
After clicking on the button: Search
as you can see after clicking the search button the URL does changes because
of line 37: window.location.href = ‘/’ + input, now it refer to the default window location + input.
so this was a brief example showing how I use window.location.href property in my projects, if you want to get a better understanding of the topic and how it actually works when complete backend and frontend is involved then do refer to this Github repo.
