How to make workaround for window.location.href?

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’

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
      <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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
      <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>

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.