How to make workaround for window.location.href?
Last Updated :
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=
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...