How to do "When selecting an option in dropdwn, it loads other database data into a Textarea" in php, mysql and Jquery

Question

I have a form that has a select field name="nome_cliente" retrieving all registered clients from the mysql database.

in this same form I have several inputs that will be registered to that selected client, and has a textarea name="evolucao" that this as readyonly because in this textarea I want to return from the database the already registered evolution of that client so that it is registering new information already know what has registered evolution.

I would like to know how to do that, because it will have to be with jquery from the nome_cliente that has already been selected in the dropdown and load this information into a textarea.

Follows code

<div class="col-md-12">
	<div class="col-md-10 titulo">Adicionar sessões para Pacientes Cadastrados
</div>
<div id="adicionar">
	<form name="form1" action="<?php echo raiz?>servicosbd/adicionaragenda.php" method="POST">
		<div class="col-md-6 item">
			<div class="texto">
				Paciente:
			</div>
			<select name="nome_cliente" id="" required>
				<option value="">Escolha o paciente</option>
				<?php 
					
					$query = "select `id`,`nome` from `clientes` order by nome asc";
					$result = $mysqli->query($query);
					$num_results = $result->num_rows;
					if($num_results > 0){
						while ($row = $result->fetch_assoc()) {
							$id_cliente = $row['id'];
							$nome_cliente = $row['nome'];
							if(!empty($nome_cliente)){

				?>

					<option value="<?php echo $nome_cliente; ?>"><?php echo $nome_cliente; ?></option>
				
				<?php
							}
						}
					}
				?>
			</select>
			<?php if(!empty($id_cliente)){ ?>
				<input type="hidden" name="id_cliente" value="<?php echo $id_cliente; ?>">
			<?php } ?>
		</div>

		<div class="col-md-12">
			<div class="texto">
				Evoluções Anteriores:
			</div>
			<textarea name="evolucao" rows="5" readonly style="background: #C1C1C1;color: #000000">
				
		AQUI QUE TEM QUE RETORNAR OS DADOS
					
				
			</textarea>

Answer 1

Put in a date attribute the value you need for each client and in the input change change the value of the text area:

<select name="nome_cliente" id="" required>
<option value="">Escolha o paciente</option>
<?php
// ADICIONAR O CAMPO EVOLUCAO, ESTOU ADICINANDO UM EXEMPLO
$query = "select `id`,`nome`,`evolucao` from `clientes` order by nome asc";
$result = $mysqli->query($query);
$num_results = $result->num_rows;
if ($num_results > 0) {
    while ($row = $result->fetch_assoc()) {
        $id_cliente = $row['id'];
        $nome_cliente = $row['nome'];
        // AQUI VOCÊ TERA QUE ADICIONAR A VARIAVEL EVOLUCAO E NA SUA QUERY TBM
        $evolucao = $row['evolucao'];
        if (!empty($nome_cliente)) {

            ?>

            <option value="<?php echo $nome_cliente; ?>"
                    data-evolucao="<?php echo $evolucao ?>"><?php echo $nome_cliente; ?>>
            </option>

            <?php
        }
    }
}
?>
</select>
<!--Jquery-->
<script type="text/javascript">
    $(document).ready(function () {

        $('select[name="nome_cliente"]').on('change', function () {
            var evolucao = $('select[name="nome_cliente"] > option:selected').data('evolucao');

            $('textarea[name="evolucao"]').text(evolucao);
        });

    })
</script>

I left the comments in PHP where you should add your evolution field and I’ll put down here an example with static data for you to get an idea:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="nome_cliente" id="" required>
    <option value="" data-evolucao="">Escolha o paciente</option>
    <option value="1" data-evolucao="Evolucao1">Paciente1</option>
    <option value="2" data-evolucao="Evolucao2">Paciente2</option>
    <option value="3" data-evolucao="Evolucao3">Paciente3</option>
</select>
<br><br>
<textarea name="evolucao" readonly>

</textarea>
<!--Jquery-->
<script type="text/javascript">
    $(document).ready(function () {

        $('select[name="nome_cliente"]').on('change', function () {
            var evolucao = $('select[name="nome_cliente"] > option:selected').data('evolucao');

            $('textarea[name="evolucao"]').text(evolucao);
        });

    })
</script>