Load a TEXTAREA field from a SELECT with Jquery

Question

I have a modal that performs email sending. Only I created some email templates in the database mysql. On the screen appears my select with all the templates for selection, only that I would like when the model is selected, it fills the input "subject matter" and the textarea "content" with the information coming from the database.

Below follows my own HTML with select using PHP:

<div class="form-group m-form__group row">
  <div class="col-lg-6">
    <label for="recipient-name" class="form-control-label">Assunto:</label>
    <input type="text" class="form-control limpar" id="assunto">
  </div>
  <div class="col-lg-6">
    <label for="recipient-name" class="form-control-label">Modelo:</label>
    <select class="form-control m-input limpar" id="select_acao" name="id_atividade_tipo">
      <option>Selecione</option>
      <?php
                      $sql_modelo = $db->prepare("SELECT * from modelo_email");          
                      $sql_modelo->execute();   $atv = 0  ;        
                                      while($row_modelo=$sql_modelo->fetch(PDO:: FETCH_ASSOC)){
                                        $atv++; ?>
        <option value="<?php echo $row_modelo['id']?>">
          <?php echo utf8_encode($row_modelo['nome'])?>
        </option>
        <?php }?>
    </select>
  </div>
</div>
<div class="form-group m-form__group row">

  <textarea class="summernote" id="conteudo" name="conteudo">
                <br/>	
                 </textarea>
</div>

I believe that this process should be done with jquery and Ajax making a request on a page PHP, but I don’t know how I’d do it that way.

Answer 1

As you said, you have to call an Ajax to a PHP page and return the subject matter and the contents. You can return a PHP JSON with these two values and when Ajax is completed, insert each value into your field.

First thing is to put one onchange in the select to call a function that will process Ajax. Put it in select:

onchange="carrega()"

And insert the function in the script:

function carrega(){

   $("#select_acao").prop("disabled", true); // desabilita o select

   $.ajax({
      url:'pagina.php',
      dataType: 'JSON',
      type: 'POST',
      data: 'id='+ $("#select_acao").val(), // envia o valor do select
      success: function(data){
         data = JSON.parse(data);
         $("#assunto").val(data.assunto); // insere o assunto no input
         var conteudo = data.conteudo.replace(/\/n/g, '\n'); // restaura a quebra de linha
         $("#conteudo").val(conteudo); // insere o conteúdo do email no textarea
      },
      complete: function(){
         $("#select_acao").prop("disabled", false); // reabilita o select
      }
   });
}

In the above example Ajax calls a PHP pagina.php, but you can use any other name you want.

On the PHP page you must return a JSON with two keys: assunto and conteudo, in this format, making a echo:

echo json_encode('{"assunto": "'.$assunto.'", "conteudo": "'.$conteudo.'"}');

The variables $assunto and $conteudo you will pull from the database according to the id received with $_POST['id'] that was sent by Ajax.

Problem: The variable $assunto is a single line, no problem. The problem is with the content of the email that goes in the variable $conteudo that may have line breaks, and this will render JSON invalid.

To resolve you must eliminate line breaks with str_replace before the echo. My suggestion is to reverse the \n:

$conteudo = str_replace("\n", "/n", $conteudo);

PHP will look something like this:

<?php
// consulta o banco de dados de acordo com o valor em $_POST['id']
$assunto = valor da coluna "assunto" do banco;
$conteudo = valor da coluna "conteudo" do banco;

$conteudo = str_replace("\n", "/n", $conteudo); // elimina as quebras de linha
echo json_encode('{"assunto": "'.$assunto.'", "conteudo": "'.$conteudo.'"}');
?>