Basic Javascript Login

Question

So I'm trying to have someone enter their name on one page and then on another page it will say Hello, entered_name. Here's what I have: First Page:

<!DOCTYPE html>
<html>
<body>
<form action="SecondPage.html">
    <input type="text" id="uname">
</form>
</body>
</html>

Second Page:

<html>
<body>
    <script type="text/javascript" src="main.js"></script>
    <script>myFunction();</script>
</body>
</html>

Javascript:

function myFunction()
{
    var person = document.getElementById("uname")
    document.write("Hello " + person);
}

The output is Hello null.

Can someone help me figure out how to fix this? I'm very new to Javascript I'm trying to learn how to use external Javascript. I've tried adding $(document).ready(function() with and downloading jquery and moving it to the folder with the other files. But I don't know if that was all I had to do for that so maybe that's the problem. I don't know. I also don't know if that's the right way to access the formdata. There seem to be many different ways and I've tried a few.

Thanks for any suggestions.

score 1 · Answer 1 · answered Mar 03 '17 at 20:09

Nothing in your files is actually passing the value to the second page... it can't do "document.getElementById("uname")" because there's no "uname" anywhere on the second page.

If you add method="GET" to the form, and name="uname" to the input, you'll see it passes the info via the URL. You'll then need to find some way to grab the string from there. Another possibility would be to store the uname in a cookie.

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

This would be a security consern: being able to access the DOM of another webpage. When you submit the form, the parameters (uname) are added to the URL in the form of ?name=value&name=value. We need to fetch these and parse them with JavaScript. You also need to add method='GET' on the first page in the form tag.

You can fetch the value from location.query on the second page with this nice little script from https://stackoverflow.com/a/901144/3434588.

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

By the way, a login webpage with JavaScript isn't gonna work as security is an issue. Use a server-side language like PHP.

score 0 · Answer 3 · edited May 23 '17 at 11:53

You mentioned that you are new to JavaScript so I'll provide this example which follows along closely with the approach you described however, I wouldn't recommend actually using this in your application if you are concerned with security. This example uses a url hash/query string to pass the key value pair. I would recommend you try and get jQuery setup again, this post may help

Installing jQuery?

First Page

<!DOCTYPE html>
<html>
    <body>
        <form id="myForm" method="GET" action="second.html">
            <input type="text" name="uname"/>
        </form>
    </body>
</html>

Second Page

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        window.onload = function() {
            var query = window.location.search.substring(1).split("=");
            var uname = document.getElementById("uname").innerHTML = "Hello " + urldecode(query[1]);
        }

        function urldecode(str) {
           return decodeURIComponent((str+'').replace(/\+/g, '%20'));
        }
    </script>
</head>
<body>
    <span id="uname"></span>
</body>
</html>

This post explains the URI decoding JavaScript URL Decode function

Basic Javascript Login

3 Answers3