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.