How to make workaround for window.location.href?

30 Aug, 2019
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="https://help.github.com/en/articles/changing-your-github-username ">        Forgot your Username          </a>       <br>      <a href="https://github.com/join ">Don't have an account?</a>     <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 propertyto 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" />      <a href="https://help.github.com/en/articles/changing-your-github-username">        Forgot your Username          </a>          <br>      <a href="https://github.com/join ">Don't have an account?</a>      <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: Searchas you can see after clicking the search button the URL does changes becauseof 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.
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.