Passing variables to URL with clicking on image - JavaScript

Question

When clicking on image which is also link to login page with login form, I would like to pass my username. Clicking on image it redirects user to login page and in username field automatically places username which was passed there trough URL so user has to write only password and click button to login.

I was thinking maybe something like this:

<script language="javascript" type="text/javascript">
var scrt_var = {{contact.username}} 
</script>

<a href="https://{{contact.image_bank_url}}" onclick="location.href=this.href+'?key='+scrt_var;return false;"><img src="http://image.png"></a>

And this is my username field in login form:

<input id="id_username" name="username" type="text">

Is there maybe other way to do it?

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

You could set the username as parameter: e.g. ?username={{contact.username}}

<a href="https://{{contact.image_bank_url}}" onclick="location.href=this.href+'?username='+scrt_var;return false;">

  <img src="http://image.png">

</a>

and then read it on the login page (function taken from How can I get query string values in JavaScript?

document.getElementById("id_username").value = getParameterByName("username")

function getParameterByName(name) {
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(window.location.href);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

edited May 23 '17 at 12:24

Community

1
1

answered Feb 21 '17 at 23:03

arc

4,553
5
34
43

I have tried but it's not placing username to username field in login form. It does pretty much same as my code. Do you know how to preview it then in username field in form? – Feb 21 '17 at 23:12
@user3599620 what is the id of the username field? – arc Feb 21 '17 at 23:14
@user3599620 I did an update as well, it should work with this `document.getElementById("id_username").value = getParameterByName("username")` ;) – arc Feb 21 '17 at 23:19
Should something be different on onclick="location.href=this.href+'?key='+scrt_var;return false;"> – Feb 21 '17 at 23:53
@user3599620 yes, `key` should be `username` – arc Feb 21 '17 at 23:55
@user3599620 sure – arc Feb 22 '17 at 00:00

score 0 · Answer 2 · edited May 23 '17 at 12:24

I would use a hash for this personally. See this question to see how to read a hash:

How can you check for a #hash in a URL using JavaScript?

You don't have to use regex. You don't have to do any complicated linking. just add a # symbol to the link to the login page. After the # fill in the username you want to use to populate the field. Then use jQuery to pull the hash out and put in the input field.

var username = window.location.hash;
$usernameInput.val(username);

Edit for further instruction.

Let's say I'm on a website http://thisismysite.com#thisismyhash

In javascript, if I type

console.log(window.location.hash);

My console will read

"thisismyhash"

I'm suggesting you use this functionality to carry your username from page 1, where the user clicks the link to go the login page, to page 2. Upon arriving at page 2, pull the username from the has and put it in your input field.

Passing variables to URL with clicking on image - JavaScript

2 Answers2