-1

I'm trying to make a login using JavaScript which should check the user authentication using a REST service, using a client in java (for testing) it return a string "hej" if it's successful. My HTML code:

    <div class="login">
        <form method="POST">
            <h1>Login</h1>
            <input type="text" name="username" id="username" placeholder="Username" required><br><br>
            <input type="password" name="password" id="password" placeholder="Password" required><br><br>
            <input type="submit" name="submit" id="submit" onclick="UserAction()">
        </form>
    </div>
    <script src="load_user.js"></script>

And heres my javascript code (load_user.js)

var username;
var password;

function UserAction() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "http://localhost:8080/Footballmanagerrestservice/webresources/login", false);
  xhttp.setRequestHeader("", User());
  xhttp.send();
  var response = JSON.parse(xhttp.responseText);
  console.log(response);
  if (response == "hej") {
      var url = "http://localhost:8080/FM3/spil2.jsp";
      $(location).attr('href', url);
}
}

function User(user, pass) {
  username = document.getElementById("username").toString();
  username = document.getElementById("password").toString();
  var UserAndPass = "?username=" + username + "&password=" + password;
return UserAndPass;
}

I want it to change URL when the login is correct, but it just refreshes the page instead.

Gowtham Shiva
  • 3,802
  • 2
  • 11
  • 27
Kuno Heltborg
  • 71
  • 7

4 Answers4

1

use with return in onclick="return UserAction()" function and add return false in end of the UserAction() function .They will prevent the page refresh . and window.location.href=url is redirect with new page

Changed JavaScript code

var username;
var password;

function UserAction() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "http://localhost:8080/Footballmanagerrestservice/webresources/login", false);
  xhttp.setRequestHeader("", User());
  xhttp.send();
  var response = JSON.parse(xhttp.responseText);
  console.log(response);
  if (response == "hej") {
      var url = "http://localhost:8080/FM3/spil2.jsp";
      window.location.href=url
}
return false; //added to prevent page refresh
}

function User(user, pass) {
  username = document.getElementById("username").toString();
  username = document.getElementById("password").toString();
  var UserAndPass = "?username=" + username + "&password=" + password;
return UserAndPass;
}

Changed HTML

<div class="login">
        <form method="POST" onsubmit="return UserAction()">
            <h1>Login</h1>
            <input type="text" name="username" id="username" placeholder="Username" required><br><br>
            <input type="password" name="password" id="password" placeholder="Password" required><br><br>
            <input type="submit" name="submit" id="submit">
        </form>
    </div>

prasanth
  • 22,145
  • 4
  • 29
  • 53
  • I tried using your way, and added the window.location at the start of the UserAction(), but it still not changing the url. I don't think it's entering the function – Kuno Heltborg May 03 '17 at 10:51
  • Try my updated answer `onsubmit` event was added and removed the `click` event from button – prasanth May 03 '17 at 10:58
  • I changed the function to: function UserAction() { var url = "http://localhost:8080/FM3/spil2.jsp"; window.location.href = url } So it should redirect when enter. But still nothing happen, can i remove "form" and use an onclick on submit? – Kuno Heltborg May 03 '17 at 11:17
  • If i change the submit to at button, then it will enter the function using onclick="UserAction" – Kuno Heltborg May 03 '17 at 11:32
  • you are almost done..do with `return false` in end of `userAction()` .do the old one `function UserAction(){ console.log('sxs') location.href="localhost:8080/FM3/spil2.jsp" return false; }` try this – prasanth May 03 '17 at 11:32
0

use window.location.href = "url_here"; to navigate to new page

Edison Augusthy
  • 1,535
  • 17
  • 32
  • I just tried, even at the start of function UserAction, but nothing happens. I dont think it ever reaches UserAction when pressing submit – Kuno Heltborg May 03 '17 at 10:36
0

Please do a redirect, after checking the user credentials to change the URL

window.location.replace("http://stackoverflow.com");

or simulate clicking a link like 

window.location.href = "http://stackoverflow.com";
Max
  • 1,203
  • 1
  • 14
  • 28
  • I just tried, even at the start of function UserAction, but nothing happens. I dont think it ever reaches UserAction when pressing submit – Kuno Heltborg May 03 '17 at 10:36
  • Then you might be interested in this: http://stackoverflow.com/questions/5384712/capture-a-form-submit-in-javascript – Max May 03 '17 at 11:48
0

Use 

window.location.href = "http://localhost:8080/FM3/spil2.jsp";
Sameera.San
  • 67
  • 2
  • 15
  • I just tried, even at the start of function UserAction, but nothing happens. I dont think it ever reaches UserAction when pressing submit – Kuno Heltborg May 03 '17 at 10:33