Ajax sends php query in Mysql

Question

Hello friends I’m studying Ajax I’m trying to make this code execution work, but I still can’t. I’m trying to do after formprodutos be selector is sent to consultarcor.php via Ajax the information to query the colors of each product selected consultarcor.php check and return the result tocores as <option> for selection in another form.

Someone can check what I did wrong because Ajax doesn’t work.

 function showHint(str) {
   if (str.length == 0) { 
    document.getElementById("produto").innerHTML = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    var vasr="cor="; 
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("produto").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("POST", "consultacor.php"+str, true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(vasr);

Formulario Html

     <tr>
     <td><input type="text" size="2" maxlength="2"name="quant" placeholder="Quant." onkeypress="return maskKeyPress(event)"/></td>
     <td><input list='produtos' name='produto' onchange="showHint()"/>
     <datalist id='produtos'><?php
      $sql= mysqli_query($conn,"select DISTINCT descricao from produtos  order by descricao");
      while ($resp = mysqli_fetch_array($sql)) {

     $group=$resp['descricao'];
      echo "

"; }

      ?> </datalist></td>
      <td>
      <input list='cor' name='cor'/>

      </td>
      </tr>

Code inside.php color query

    <?php
    include "conecta.inc";
    $q[]= $_POST['produto'];
    $q = array_filter($q);

    $query.= "select * from produtos where descricao='$q'";

    $x = mysqli_query($conn,$query );

    while($prt=mysqli_fetch_array($x)){ 
    $cor[]=$prt['cores'];   

    echo "
    <datalist id='cores'>
    <option value='$cor'>
    </datalist>";
     }
     ?>

This is the error shown "console"

plug.php:110 Uncaught Typeerror: Cannot read Property 'length' of Undefined

Answer 1

The amount of inconsistencies in the code is large.

In HTML there is no element whose id is product, you are using the tag getElementbyId to take an id that does not exist throughout the code, and analyzing it, you should use getElementsByName("produtos"), thus, to try to recover the value of your selected product and then move on.

Already in PHP, the <datalist id="cores"> is not equivalent to <input list="cor" /> followed by this, I imagine that the while would print many <datalist> instead of loading a list of <option> within the <datalist>.

I suggest a good review of the code, and to work with ajax start using the "console" of the browser to identify the errors more quickly.