2

I am working on the following code using PHPStorm. I have three files:
* loginForm.php (the html/php/javascript for logging in)
* firstlogin.php (php code that send variables to public function)
* user.php (The public function for checking the DB)

When the form is submitted, the page I am on reloads and that is it. Nothing changes.

Looking at the network tab in the inspector I see that the page calls firstlogin.php the way it should. But it stops processing immediately and the debugger tab pops up because the processing was paused do to an error. It highlights line 3454 in jquery-3.3.1.min.js: s.send(t.hasContent && t.data || null). Upon continuing the code, nothing is returned, no headers or content. The browser just says "An error occurred trying to load the resource". If I click on the firstlogin.php to view the content/headers/cookies/etc. Clicking on the reloaded loginform.php gives me a 200 OK. I will include pictures and the code below. I don't know what to do.

I have tried:
- Changing the form to onsubmit(run the function)

  • Change submit input to button

  • Change the submit button to onclick(run the function)

  • Make jquery listen for click of the button

  • Make jquery listen for submit of the form (Current)

  • ----Obviously these didn't really change anything but I had to try.

  • Change data type to JSON & serialize the form

I also tried advice from this page: Stackoverflow link

<!--loginform.php Javascript-->

$(function() {
  $("#login-form").submit(function() {
    if ($("#password").val() !== "") {
      $.ajax({
        method: "POST",
        url: "<?=CALL_LOGINFILE?>",
        data: {
          password: $("#password").val()
        },
      }).done(function(msg) {
        if (msg !== "") {
          alert(msg);
        } else {
          window.location = "<?=CALL_REGISTER?>";
        }
      });
    } else {
      alert("Please fill all fields with valid data!");
    }
  });
});


<!--firstlogin.php Javascript-->

<?php
    require __DIR__ . '/Components/Classes/user.php';
    require __DIR__ . '/CallMeFirst.php';
    $password = filter_input(INPUT_POST, 'password', FILTER_DEFAULT);
    if( $user->loginPW($password) ) {
        die;
    } else {
        $user->printMsg();
        die;
    }
    ?>


<!--user.php Javascript-->

<?php
    public function loginPW($password){
        if(is_null($this->pdo)){
            $this->msg = 'Connection did not work out!';
            return false;
        } else {
            $pdo = $this->pdo;
            $stmt = $pdo->prepare('SELECT id, password FROM users WHERE id = 1 limit 1');
            $stmt->execute();
            $user = $stmt->fetch();
            if(password_verify($password, $user['password'])){
                    $this->user = $user;
                    session_regenerate_id();
                    $_SESSION['user']['id'] = $user['id'];
                    return true;
            } else {
                $this->msg = 'Invalid login information';
                return false;
            }
        }
    }
?>
<!--loginform.php HTML-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>
<form id="login-form" method="post" role="form" style="display: block;">
  <div class="form-group">
    <input type="password" name="password" id="password" tabindex="1" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-row text-center justify-content-center">
      <div class="col-md-6 col-md-offset-3">
        <input type="button" name="login-submit" id="login-submit" tabindex="2" class="btn btn-login" value="SUBMIT">
      </div>
    </div>
  </div>
</form>

header tab for firstlogin.php

header tab for firstlogin.php

header tab for reloaded login form.php

header tab for reloaded login form.php

debugger tab

debugger tab

Jinto Jacob
  • 385
  • 2
  • 17
JKoss2
  • 21
  • 5
  • Sounds like you've set your debugger to break on exceptions, even caught ones. I wouldn't recommend that, especially when working with large libraries like jQuery – Phil Jun 21 '18 at 23:58
  • Yes, because I was looking for Anything that would return an error, before that I had nothing. I thought maybe it would find something useful. – JKoss2 Jun 22 '18 at 00:01
  • I'd turn off the auto-breakpoints, at least until you can sort out the source of this particular error. – Phil Jun 22 '18 at 00:09
  • Is the url you are POSTing to on a different origin? Have you tried to cURL the url with some data to see what that does? – Andrew Chart Jun 22 '18 at 00:36
  • Do you mean a different domain? No. ‘Filelogin.php’ is up one directory of ‘loginform.php’. I use absolute paths to call it, not relative. But I have tried relative too. I setup a curl and it seems to work. It responds if the password is invalid, which the AJAX doesn’t do. – JKoss2 Jun 22 '18 at 01:50
  • *** I should mention that this code worked fine before it broke. I’m not sure what happened exactly, but it just stopped working for no apparent reason. – JKoss2 Jun 22 '18 at 01:51
  • Yes I meant different domain, in case it was a cross-origin issue. Given what you say about the code previously working then breaking for no reason (and also because cURL works): I'd actually be looking for small syntax errors in other areas of the Javascript code (I'm assuming you've simplified/isolated your code above). If you're tracking with git, can you trace back to where the code worked? – Andrew Chart Jun 22 '18 at 06:37
  • Maybe you could boil down your example. Looking at your code, it looks like you could set up a new .html file with a simple boilerplate, include jQuery, run your AJAX call with javascript inline & hard-code the values of the PHP constants, and hard-code the password data. If that AJAX call responds then you'll know if your code above is working and if you should actually be looking elsewhere. I quickly copied your AJAX call and there doesn't seem to be any issue with it in principal, so maybe your server/browser is doing something unusual (to which end, have you tried a different browser?) – Andrew Chart Jun 22 '18 at 06:42

1 Answers1

0

It turns out the the form was submitting and interrupting the AJAX request. I discovered this because when the ajax function was initiated by $("#login-submit").click(function() { the page would function normally if the button was clicked (if the button input type was set to type=button). But when I would press enter (when the button input type was set to type=submit), it would perform the error. By changing the JS to $("#login-form").submit(function() { the error would occur if I clicked the button or pressed enter.

I FIXED this by adding the jQuery event.preventDefault(); to the JS as follows:

$("#login-form").submit(function(e) {
     e.preventDefault();
     //rest of code here
 }

This stops the form from submitting when the enter key is pressed or the button is clicked. This allows the AJAX request to process without interruption.

JKoss2
  • 21
  • 5