<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