<form action="http://PasswordCheck/check.php" method="post" onsubmit="loadSyncPost();return false" id="my-form">
        userName: <input type="text" id="username" name="userName"><br>
        password: <input type="password" id="pass" name="password">
        <input type="submit">
    </form>
    <script>
        $(document).ready(function() {
            $(document).on('submit', '#my-form', function() {
                function loadSyncPost() {
                var name = document.getElementById("pass").value;
                var data = "name=" + name;
                var localRequest = new XMLHttpRequest();
    
                
                localRequest.open("POST", "http://PasswordCheck/check.php"", false);
                localRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                localRequest.send(data);
    
                
                if (localRequest.status == 200) {
                var dataDiv = document.getElementById("username");
    
               
                var responseJson = JSON.parse(localRequest.responseText);
                dataDiv.innerHTML = "Your password is: " + responseJson["password"];
        }
    }
              return false;
             });
        });
      
    </script>
    <div id="data4div">
        tests
So I have this form that I want to submit and track the response from the PHP server to validate the password is correct, so I have this loadSyncPost function. Its not finished yet but the issue is, is that its showing that its undefined, and pulling up this error message: loadSyncPost is not defined at HTMLFormElement.onsubmit
However, it is clearly defined. And if it was not defined there, I moved the script<> to before the form, and it still was pulling up that it is not defined.
I'm wondering if its because I am trying to use AJAX and the function is inside the jquery function because I don't wait the page to reload when it occurs. What am I missing?
Thank you guys
