1
 <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

ligma
  • 31
  • 2
  • See [here](https://stackoverflow.com/a/59539045) - in short, inline handlers may only reference global variables. But inline handlers have horrible scoping rules - better to avoid them entirely. In this case, fix it by doing `$('#my-form').on('submit', loadSyncPost)` (removing both the `$(document).ready` and `$(document).on('submit'` portions) – CertainPerformance Nov 02 '20 at 18:57
  • This answers my question, thank you @CertainPerformance – ligma Nov 02 '20 at 19:04

0 Answers0