2

I have a login page where a user can login. If the login fails the user is sent to a new page with text that says login failed. I am trying to redo this functionality using ajax so that if a login fails, it will say login failed on the login page, there will be no going to another page.

Here is the code in my login function, in my controller, that returns a view on the login failing. I am not sure what to replace the code with to make it work with ajax. 

public function checkValue()
{
// if login failed
return view("pages.loginFailed");
}

All I want to do with ajax is to change an element id to block when the login fails instead of returning a new page. Along the lines of the code snippet below. 

 var x = document.getElementById("loginFailed");
 x.style.display = 'block';

Here is the code in my blade view 

<div class="textFields">
<form action =""{{ route("loginVPM") }}"" method="post">
<div class="loginDiv"><input class="loginInput" type="form" placeholder="username" name="firstnameLogin"> </input></div>
<div class="loginDiv"> <input class="loginInput" type ="form" placeholder="lastname" name="lastnameLogin"> </input> </div>
<div class="loginDiv"> <input class="loginInput" type ="password" placeholder="password" name="passwordLogin"> </input> </div>
</div>
<div class="loginFailed" id="loginFailed"> login Failed ! </div>
<br><br><br>
<div class="center"> Forgot? &nbsp;| &nbsp; <a href="http://villageprintwebapp.app/users"> Sign up </a> </div>
<br><br>
<div class="center">
<button type="submit" class="submitButton"> Submit
</button>
</div>
</form>

Here is the javascript that contains the ajax 

function display() {

var x = XMLHttpRequest();
x.onreadystatechange = function() {
if(x.readyState == 4 && x.status == 400)
{
var  y = document.getElementById("loginFailed");
y.style.display = 'block';
}
};
x.open("GET", " ", true);
x.send();

My question here is that I don't understand what to put in the second argument of the open method. I know that this should be the url of the server location but am not sure how to find this out, or if I can pass in another parameter here.

ray
  • 823
  • 13
  • 27

1 Answers1

0

First of all the x.open should be a POST request and not a GET request.

The variables have to be sent as a parameter in x.send(your variable)

See the following question and tutorial.

Send POST data using XMLHttpRequest

https://www.developphp.com/video/JavaScript/Ajax-Post-to-PHP-File-XMLHttpRequest-Object-Return-Data-Tutorial

You should prevent the default action of the submit button or it will still redirect to the other page.

Community
  • 1
  • 1
Alex Bollbach
  • 3,730
  • 2
  • 25
  • 61
  • I am not trying to send any variables though. "prevent the default action of the submit button or it will still redirect to the other page" I don't think this is right – ray Apr 20 '16 at 20:42
  • You need to send the data from the form fields as argument to x.send(). – Alex Bollbach Apr 20 '16 at 20:54
  • In x.open("GET", " ", true); you would enter {{ route("loginVPM") }} in the blank space, after you change GET to POST because it would be extremely insecure to do user login over GET – Alex Bollbach Apr 20 '16 at 20:55