javascript ajax login form handling

Question

Im working on an ajax form to show errors without reloading the page. So if everything is good, the user we be redirected to home.php . At the moment the user will also be redirected when there is an error.

This is my code so far:

index.php:

<script>
function myFunction()
{
var elements = document.getElementsByClassName("formVal");
var formData = new FormData(elements); 

var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            window.location.replace("/index.php");
        }
    }
    xmlHttp.open("post", "login.php"); 
    xmlHttp.send(formData); 
}  
</script>

login.php

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (!$user->logUser($$_POST['username'], $_POST['password'])) {
        echo 'ok';
    } else {
        echo 'not ok';
    }
}   
?>

Answer 1

Remove loop from the code and pass elements in FormData() because passing element will take all the fields inside the form

var elements = document.getElementsByClassName("formVal");
var formData = new FormData(elements); 

Answer 2

Throw a 401 error if it fails login, this will stop the redirect.

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (!$user->logUser($$_POST['username'], $_POST['password'])) {
        echo 'ok';
    } else {
        header("HTTP/1.1 401 Unauthorized");
        exit;
    }
}   
?>

Answer 3

do you know jquery ? jquery w3 school search on google avaible

$('#data-div-id').load('www.sdasd .php ? or whatevver');

    function tmp_func_sil_ok(e){
  $.ajax({type:"GET",url:"go.php",data:{'snf_sil':e},success: function(e){msg_("<h3>Başarılı</h3>");}});
}