Calling a javascript function in html

Question

I'm working on javascript and html. I have a javascript function, called login, and I want to call this function in HTML. I saw some codes that includes the javascript function directly in the HTML. I don't want to do it because the code is very long. Here is the HTML:

<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password">
<script>
    window.onload = login()
</script>
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" type="submit">

And the Javascript function is:

function login(){

    var userName = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    console.log(userName);
    console.log(password);
    var data = {
        userName : userName,
        password : password
    };
    console.log(data);
    doJSONRequest("POST", "/login", {}, data, function(location){
        document.location = location.location;
    });
    }

I included a window.onload because I want to call the function when the page started. The console (obliviously) says to me that "login in not defined" and, of course, it has reason. But I don't want to put all the code into the HTML (also because there are like 30 lines more). Can you help me please? Thanks to everyone :)

Answer 1

Put the javascript in another js file(eg: filename.js) and load it load it in the header..

<script src="path to the file"></script>

Also you have to change window.onload = login() to window.onload = login

window.onload expects a reference of a function. When you use window.onload = login() the return value of the login() function is set as the reference which is not correct. The function name login is the reference..

Answer 2

I think that what you want is to run your login code when the user clicks on the button. You can do that this way:

<form>
    <input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
    <input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password">
    <input class="btn btn-beats btn-block btn-stacked" value="Tune in" onclick="login()">
</form>
<script src="login.js></script>

login.js:

   function login(){

      var userName = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      console.log(userName);
      console.log(password);
      var data = {
                userName : userName,
                password : password
      };
      console.log(data);
      doJSONRequest("POST", "/login", {}, data, function(location){
          ...
      });

Answer 3

SOLUTION

Just to be correct with the other users here is my solution:

 <form action="login.html" method="POST" class="form-signup">
    <input class="form-control form-stacked" name="firstname" placeholder="Firstname" type="text" required="true">
    <input class="form-control form-stacked" name="lastname" placeholder="Lastname" type="text" required="true">
    <input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username" onkeyup="login()">
    <input class="form-control form-stacked" name="email" placeholder="email" type="email" required="true">
    <input class="form-control form-stacked" name="password" id = "password" placeholder="Password" type="password" required="true" onkeyup="login()">
    <input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password" onkeyup="enable()" required="true">
    <input class="btn btn-beats btn-block btn-stacked" value="Sign up" id = "btnPlaceOrder" type="submit">
  </form>

I just add the function "login" when the user wants to store the values