GET parameters from URL in Javascript

Question

newbie here. I've made a simple form in the index.html as you can see below:

<form name="parameters" METHOD="GET" ACTION="pag1.html">
login: <INPUT TYPE="text" NAME="login"> 
password: <INPUT TYPE="text" NAME="password"> 
<input type="submit" value="ok">
</form>

On pag1.html i've placed my javascript to split the URL, as you can see below:

<head>
<script language="JavaScript">
function processUser()
  {
    var parameters = location.search.substring(1).split("&");

var temp = parameters[0].split("=");
l = unescape(temp[1]);
temp = parameters[1].split("=");
p = unescape(temp[1]);
document.getElementById("log").innerHTML = l;
document.getElementById("pass").innerHTML = p;
  }
</script>
</head>

And two DIVs to display both of them:

<div id="log">LOGIN:</div>
<div id="pass">PASSWORD:</div>

The URL on pag1.html is like: " pag1.html?login=123&password=asd "

But all that i get is :
LOGIN:
PASSWORD:

Where did i go wrong?

possible duplicate of [How can I get query string values in JavaScript?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Raphael Serota, Mar 21 '15 at 18:06
There is a chance that the JS is running before the divs are rendered. — TheDude, Mar 21 '15 at 18:06

score 2 · Accepted Answer · answered Mar 21 '15 at 18:24

Your function should be called after whole HTML is loaded. To do that you need to place your function as a callback of DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", function(){
    function processUser()
    {
         var parameters = location.search.substring(1).split("&");

         var temp = parameters[0].split("=");
         l = unescape(temp[1]);
         temp = parameters[1].split("=");
         p = unescape(temp[1]);
         document.getElementById("log").innerHTML = l;
         document.getElementById("pass").innerHTML = p;
    }

    processUser();
})

score 1 · Answer 2 · answered Mar 21 '15 at 18:07

1

It's just because your code is executed before #log and #pass rendering in the DOM. Just put your before the closing tag and it will works.

answered Mar 21 '15 at 18:07

Freez

7,208
2
19
29

Still didn't get it. Could you please be more accurate? – Vittorio Chierici Mar 21 '15 at 18:12
Try to move your script from the element to the end of your element. – Freez Mar 21 '15 at 18:14
don't forget to call your function processUser(); at the end of your script – Freez Mar 21 '15 at 18:21

GET parameters from URL in Javascript

2 Answers2