Fill in input according to select

Question

I need when you select something in select to make a call in the database via ajax and return. The problem that nothing happens.

This is the Index script or Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){

var idsubcategoria = $("select#idsubcategoria").val();
		$('#idsubcategoria').change(function(){
                //O método $.ajax(); é o responsável pela requisição
                $.ajax
                        ({
                            //Configurações
                            type: 'POST',//Método que está sendo utilizado.
                            dataType: 'html',//É o tipo de dado que a página vai retornar.
                            url: 'nomes.php',//Indica a página que está sendo solicitada.
                            //função que vai ser executada assim que a requisição for enviada
                            beforeSend: function () {
                                $("#dados").html("Carregando...");
                            },
                           data: {idsubcategoria: idsubcategoria},//Dados para consulta
                           //função que será executada quando a solicitação for finalizada.
                           success: function (msg)
                            {
                                $("#dados").html(msg);
                            }
                        });

		});	
});

</script>

This is the select I need when the selected person makes the call in mysqli.

<select name="idsubcategoria" class="idsubcategoria" id="idsubcategoria" required="required">
<option value="">Escolha...</option>
</select>

That’s the input I want you to get the answer to.

<input type="text" id="dados" required="required">

In the.php names file I put as well as test to see if it would return.

<?
$palavra = $_POST['idsubcategoria'];

	echo $palavra;

?>

Answer 1

Two problems:

• The line var idsubcategoria = $("select#idsubcategoria").val(); is run before select changes. You are always sending the same value, the initial, to the server... Put that line inside the change at least, but you could use the this.value which is the value of select within the .change(.

• To change the value of an input you must use .val( and not the .html(

So your code could be:

 $(function() {
    $('#idsubcategoria').change(function() {
    const idsubcategoria = this.value;
      $.ajax({
        type: 'POST', //Método que está sendo utilizado.
        dataType: 'html', //É o tipo de dado que a página vai retornar.
        url: 'nomes.php', //Indica a página que está sendo solicitada.
        beforeSend: function() {
          $("#dados").html("Carregando...");
        },
        data: {idsubcategoria: idsubcategoria},
        success: function(msg) {
          $("#dados").val(msg);
        }
      });
    });
  });