Error in input autocomplete

Question

Hello, I am trying to make an autocomplete in the unit value field according to the product name chosen in select, select options filled in according to the products of the database

The logic I developed was to execute a query in PHP that selects Description and Price and fills the tag with value = price and content of the option receiving Description. Then I used the javascript DOM to get the value of the option chosen in the "onblur" event and a PHP variable receives this content. With the PHP variable receiving value, I wanted to fill this value in the unit field

 <label>Produto: </label><br>

        <select name="nomeproduto" onblur="valorSelect()">
            <option value=""></option>

            <?php 
                $sql = "select descricao, preco_venda from produtos";
                $result = $conn->query($sql);
            
                while($rows = $result->fetch_assoc()) {
            ?>
                    <option value="<?php echo $rows['preco_venda']; ?>">
                        <?php echo $rows['descricao']; ?>
                    </option>

          <?php } ?>
            
        </select><br><br>

        <?php
                      
        $valor =
            "<script>
                function valorSelect() {
                    let valor = document.querySelector('select').value;
                    document.write(valor);
                } 
            </script>";  
        ?>

        <label>Valor unitário: </label><br>
        <input type="number" name="valorunitario" value="<?php echo $valor; ?>">

But these errors occur:

Who can help to correct these mistakes I will be very grateful

Answer 1

Come on, you’re trying to pass the variable $valor to the value an input. This is the first error, because the variable will not be the value of the execution of that function, but the string that was declared inside it. Thus, javascript does not recognize that there is a function called valorSelect(), which is the error pointed on your console.

Remember also, that it is not possible to take a value from within a javascript block while your document is loaded by the browser.

What you should do is create this function outside of php, directly in HTML, as in the following example.

    var select = document.querySelector('select');
    var input = document.querySelector('input');

    select.onchange = function(e) {
        var value = e.target.value;
        input.value = value;
    }

<select>
    <option value="">Escolher</input>
    <option value="12.000">Pc gamer</option>
    <option value="7.000">Notebook</option>
    <option value="500">Cadeira gamer</option>
</select><br />

<input />

One remark, is that you will not be able to obtain the product that the person has chosen in this way, and only the value of it.

I hope I’ve helped!!