How to make workaround for window.location.href?

0 0 1 minute read

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 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" /> 
      <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: 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.