Vanilla JS+AJAX - 检查一个值是否已经存在

Question

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!

Answer 1

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.

Answer 2

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'];