Question posted in
You can find the official documentation here.

Submit login with Jquery – Jquery ajax

When I press the Login button I get a 500 Internal server error in the console. What’s the right way to get POST using jQuery? Can you help me?

<button class="login100-form-btn" type="submit" name="login" value="login" id="Login">
  Login
</button>

$(function() {
  $("#Login").click(function() {
    var username_val = $("#username").val();
    var password_val = $("#password").val();
    var info_creds = 'username=' + username_val + '&password=' + password_val;

    if (username_val == '' || password_val == '') {
      $("#alert_response_ko").show();
      $("#alert_response_ko").html("<p>Devi inserire username e password!</p>");
      $("#alert_response_ko").fadeOut(8000);
    } else {
      $.ajax({
        type: "POST",
        url: "login.php",
        data: info_creds,
        cache: false,
        success: function(response) {
          if (response == 'wrong!') {
            console.log('ko');
            $("#alert_response_ko").show();
            $("#alert_response_ko").html("<p>Username e/o Password Errati!</p>");
            $("#alert_response_ko").fadeOut(8000);
          }

          if (response == 'login_ok!') {
            console.log('ok');
            window.setTimeout(function() {
              window.location.href = './homepage.php';
            }, 10);
          }
        }
      });
    }
    
    return false;
  })
});
Tags:

2

Answers


  1. 0

    The 500 Internal Server Error is a "server-side" error, meaning the problem is not with your PC or Internet connection but instead is a problem with the web site’s server.

    If you want to use Post, you have to send data as Object Change your
    Ajax Function to…

    $.ajax({
            type: 'POST',
            url: 'login.php',
            data: {
                username: username_val,
                password: password_val,
            },
            cache: false,
            success: function (response) {
                if (response == 'wrong!') {
                    console.log('ko');
                    $('#alert_response_ko').show();
                    $('#alert_response_ko').html(
                        '<p>Username e/o Password Errati!</p>'
                    );
                    $('#alert_response_ko').fadeOut(8000);
                }

                if (response == 'login_ok!') {
                    console.log('ok');
                    window.setTimeout(function () {
                        window.location.href = './homepage.php';
                    }, 10);
                }
            },
        });
    Login or Signup to reply.
  2. 0

    Consider the following code.

    $(function() {
  function showAlert(msg) {
    console.log(msg);
    $("#alert_response_ko").html("<p>" + msg + "</p>").show().fadeOut(8000);
  }

  function login(page, user, pass) {
    $.ajax({
      url: page,
      data: {
        username: user,
        password: pass
      },
      cache: false,
      success: function(results) {
        if (results == 'login_ok!') {
          console.log('Login Successful');
          window.setTimeout(function() {
            window.location.href = './homepage.php';
          }, 10);
        } else {
          showAlert("Username e/o Password Errati!");
        }
      },
      error: function(x, e, n) {
        showAlert("Username e/o Password Errati! " + e + ", " + n);
      }
    });
  }

  $("#Login").closest("form").submit(function(e) {
    e.preventDefault();
    var username_val = $("#username").val();
    var password_val = $("#password").val();

    if (username_val == '' || password_val == '') {
      showAlert("Devi inserire username e password!");
    } else {
      login("login.php", username_val, password_val);
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" id="username" placeholder="User" /> <input type="password" id="password" placeholder="Password" /> <button class="login100-form-btn" type="submit" name="login" value="login" id="Login">
  Login
</button>
</form>
<div id="alert_response_ko"></div>

    This might help identify issues. As was suggested, the 500 status is a general Web Server failure. It means that the Web Server encountered an error and may be configured to suppress the error message itself.

    Check your PHP Logs and Error handling settings. Better to reveal errors while testing and then hide them when in production.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search