Getting options.value from ajax generated options

Question

The idea is, that I have this select box, and when I type inside the input text, it searches for that given company inside the database with the given wildcard.

The HTML

<span id='errorCompany'></span>
<input type='text' name='search_query_bedrijf' id='search_query_bedrijf' onkeypress='checkForm(\"query_bedrijf\")' placeholder='Search companies'>
<select id='bedrijf' name='bedrijf'>
    PHP code is inside here to get all the data from the database
</select>

Javascript

function checkForm(type){
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("bedrijf").innerHTML = xmlhttp.responseText;
        }
    }
    var wildcard = document.getElementById("search_query_bedrijf").value;
    xmlhttp.open("GET","getBedrijven.php?wildcard=" + wildcard,true);
    xmlhttp.send();

    if(document.getElementById("bedrijf").options[0].value == "NoData"){
        document.getElementById("errorCompany").innerHTML = "Not a valid company.";
    }else{
        document.getElementById("errorCompany").innerHTML = "";
    }
}

AJAX

<?php
include("include/connect.php");
$wildcard = $_GET["wildcard"];

if($wildcard == ""){
$sqlSelectWildcardLeverancier = "SELECT * FROM companies";
}else{
$sqlSelectWildcardLeverancier = "SELECT * FROM companies WHERE company LIKE      '%".$wildcard."%'";
}

if(!$res = $mysqli->query($sqlSelectWildcardLeverancier)){
    trigger_error('Fout bij query: '.$mysqli->error);
}else{
    while($row = $res->fetch_assoc()){
        $companyID = $row["companyID"];
        echo "<option value='$companyID'>".$row['company']."</option>";
    }
}
$number_bedrijven = $res->num_rows;
if($number_bedrijven == 0){
    echo "<option value='NoData' selected>No data found for this query</option>";
}
?>

Now this all works like I should (it gets the data etc from the wildcard) When I type something like 'WallmartQ', it will give me 'No data found for this query", but I have to type another letter 'WallmartQE' so it gives me the error message in my span Heres a gif to explain it better : https://i.stack.imgur.com/4BQxh.gif

be careful with the parameters, if `wildcard == 'heya; DROP TABLE companies;' ` you gonna get in trouble — Totò, May 11 '14 at 13:41

score 0 · Answer 1 · edited May 23 '17 at 12:13

Just drop the options[0].value == "NoData" check in the asynchronous callback - otherwise it is executed before the response arrives and will operate on the "old" data. For more information, see How do I return the response from an asynchronous call?.

function checkForm(type) {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("bedrijf").innerHTML = xmlhttp.responseText;

            if (document.getElementById("bedrijf").options[0].value == "NoData") {
                document.getElementById("errorCompany").innerHTML = "Not a valid company.";
            } else {
                document.getElementById("errorCompany").innerHTML = "";
            }
        }
    }
    var wildcard = document.getElementById("search_query_bedrijf").value;
    xmlhttp.open("GET", "getBedrijven.php?wildcard=" + wildcard, true);
    xmlhttp.send();   
}

Getting options.value from ajax generated options

1 Answers1