We Keep Coding

Page submission state doesn't change

I have a form like this:
function nametst(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("namevalidity").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "nametst.php?=namerequest" + str, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function mailtst(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("mailvalidity").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "mailtst.php?=mailrequest" + str, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function submittst(){
nametst(document.getElementsByName('name')[0].value);
mailtst(document.getElementsByName('email')[0].value);
return xls;
}
var xls;
function submittes(callback){
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
callback(httpRequest.responseText);
}
};
httpRequest.open('POST', "submitform.php", true);
httpRequest.send();
}
submittes(function (result) {
if (result === "yes"){
xls = true;
document.getElementById("submitanswer").innerHTML = "true";
}
else{
xls = false;
document.getElementById("submitanswer").innerHTML = "false";
}
});
<form method="POST" onsubmit= "return submittst();" action = "welcome.html">  
  Name: <input type="text" name="name" onblur="nametst(value)">
<span id="namevalidity"></span> </p>
email: <input type="text" name="email" onblur="mailtst(value)">
<span id="mailvalidity"></span> </p>
<input type="submit" value="submit">
<p> form validity: <span id="submitanswer"></span> </p>
and if the name and email are valid, submitform.php returns "yes".
When I type wrong name or email the errors will appear. So far, so good. But the form validity is always false, and it won't change even when I click "submit" button. When I set default value for name and email and they are valid, the form validity remains true.
Why does this happen?
And how can I solve it?

so, I knew that the problem was because of callback method. since there was no answer to my question, I'll use synchronous mode without these callbacks.

Vanilla JS+AJAX - check whether a value already exists

I've got a form, which contains an input (a title for a post). I need that input to be filled with a value that doesn't exiest already in my database, so what I'm trying to do is requesting an AJAX call, to check on the fly whether that post title is already created, activated by "onChange" event.
Here is my Vanilla JS\AJAX code:
function checkEx(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function checkExNow(xhttp) {
document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
}
And here is my HTML input:
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>
Problem is, I have to find a way to send the input's value, in order to check it with my database on that PHP file.
Please, teach me how to do this using vanilla JS.
Thank you in advance!

You need to also send to your function the current value of the input field
function checkEx(url, cFunction, valueToCheck) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url+"?check="+valueToCheck, true);
xhttp.send();
}
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>
Here you could check a complete example.

Thanks to your help, I managed.
For those who reached that post with similar issue, wondering how to do this, this is how I managed:
JS:
function checkEx(url, cFunction, valueToCheck) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url+"?check="+valueToCheck, true);
xhttp.send();
}
function checkExNow(xhttp) {
document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
}
HTML:
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" class="reg_input" type="text" placeholder="Post Title">
<span id="pcp_ex"></span>
PHP:
$exe = $_GET['check'];

AJAX request failed

function ajax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
alert(this.responseText);
}
};
}
xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc#gmail.com&password=abc", true);
xhttp.send();
<p id="demo">
The content of the body element is displayed in your browser.
</p>
<button onclick="ajax()">
Click on me!
</button>
I have a code as seen above and the ajax operations do result in failure. What is wrong with my code? The text in p never changes.The php file starts like this:
<?php
$mail = $_POST["mail"];
$password = $_POST["password"];

xhttp.open() and xhttp.send() need to be inside the ajax() function.
function ajax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
alert(this.responseText);
}
};
xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc#gmail.com&password=abc", true);
xhttp.send();
}

due to xhttp.open and send are define out side of function block.
xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc#gmail.com&password=abc", true);
xhttp.send();

xmlhttprequest is not opening. struggling student

currently a student and struggling to get XMLHttprequest to open my local pdf.
Please could someone assist.
Comprehensive Rules
<div>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
// code for older browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("comprules").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "MagicCompRules_20170825.pdf", true);
xmlhttp.send();
}
</script>
</div>

JavaScript - Inserting into Content section of HTML

I want my program to work like this: When i press a hyperlink in html, i want it to load new content into the "content" section. I have an example code that does this. But I am trying to insert a dygraph inside and I find that the example only passes string. The graph that i was trying to insert did not appear in the content, only basic html appeared (button, background color, etc)
function loadPage(page)
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", page, true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send();
xmlhttp.onreadystatechange = function ()
{
if((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
document.getElementById("content").innerHTML = xmlhttp.responseText;
}
}
}
If i'm not wrong, the loadPage function needs to be edited. But i'm not sure how. Hope you guys can answer me in a layman's term.

You need to pass your newly retrieved content to dygraph after you fetch.
function loadPage(page) {
if (window.XMLHttpRequest) {
var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", page, true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var g = new Dygraph('content', xmlhttp.responseText, [rest of your parameters]);
}
}
}
}