Load a TEXTAREA field from a SELECT with Jquery

Question

Load a TEXTAREA field from a SELECT with Jquery

Navigation

#1 by (1 votes)

1

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

Below is my 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 this process should be done with jquery and Ajax by requesting a PHP page, but I do not know how I would do it that way.

php mysql html jquery ajax

asked by anonymous 01.07.2018 / 07:39

1 answer

How to make a for in a tag script? Someone help me, I wanted to make sure my div does not go off the screen!

score 1 · Accepted Answer

As you said, you have to call an Ajax for a PHP page and return the subject and the content . You can return a PHP JSON with these two values and when Ajax is completed, enter each value in your field.

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

onchange="carrega()"

And insert the function into 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 whatever name you like.

In the PHP page you should 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 id received with $_POST['id'] that was sent by Ajax.

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

To resolve you should eliminate line breaks with str_replace before echo . My suggestion is to invert the% s bar%:

$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.'"}');
?>