Error while recovering a textarea by jquery

Question

I’m having the following problem I’m trying to recover a textarea from a div answer that is clicked to open, but that from the error while trying to recover the textarea for some reason I’m not getting anyone to help me ?

code:

javascript

    function addEventosRespostas() {
   $('.resposta')

       .on("click", function(){
        var id = $(this).children('input').val();
        var texto = $('.resp').children('#texto').val();
        $(this).fadeOut("fast");
        $('.coment').find('.resp').fadeOut("slow",function(){
            $('.resposta').fadeIn("fast");
        });

        $(this).parents('.coment').find('.resp').fadeIn("slow");

        $('.resp').find('input').on("click",function(){

            alert(texto);
//            $.post('swith/viwer.php',{
//                acao: 'responder', id: id},
//            function(){
//                $('.visualizaron').fadeOut('slow');
//            });
           return false; 
        });

        return false;
       });
}

html with php

<div class='comentar  fl-left'>
                        <div class='coment com' >

                                <?php 

                    if($foto == "" || $foto == "uploads/"):
                        echo  "<a href='user?id={$id}'><img class='fl-left' src='".REQUIRE_PATH."/css/boot/icons/thumb.png'></a>";
                    else:
                        echo  "<a href='user?id={$id}'><img class='fl-left' src='{$imx['foto']}'></a>";
                    endif;
                    ?>
                   <p><small class='fontze1'>Comentado por:</small> <?=$nome?> <small>Em:  </small> <?=$date?> <small>As: </small> <?=$hora?></p>

                   <div class="comentando">
                       <p><?=nl2br($comentario)?></p></div>
                       <div class='fl-right resposta'>Responder<input type='hidden' value='<?=$big[id] ?>' name='idcoment'>
                       </div>
                       <div class=' resp' style='display:none'>
                           <form method='post' name="comentarios">
                               <textarea id="texto"></textarea>  

                               <input class='btn btn-green' type='submit' value='responder' name='responder'>
                           </form>
                       </div>
                   </div>

Answer 1

Exchange the .children('#texto') for .find('#texto'). The #texto is not the direct son of .resposta, but rather of the .resp, soon:

$(this).siblings('.resp').find('#texto');

Like the .resp and the .resposta are on the same level use the siblings.

---

$('.resposta').on("click", function() {
  var id = $(this).children('input').val();
  var texto = $(this).siblings('.resp').find('#texto').val();


  $(this).text('Ver Digitado');


  $(this).fadeOut("fast");
  $('.coment').find('.resp').fadeOut("slow", function() {
    $('.resposta').fadeIn("fast");
  });

  if (texto != '') {
    alert(texto);
  }

  $(this).parents('.coment').find('.resp').fadeIn("slow");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='comentar  fl-left'>
  <div class='coment com'>
    <div class="comentando">
      <p>
        <?=nl2br($comentario)?>
      </p>
    </div>
    <div class='fl-right resposta'>Responder</div>
    <div class=' resp' style='display:none'>
      <form method='post' name="comentarios">
        <textarea id="texto"></textarea>
      </form>
    </div>
  </div>

Answer 2

The problem is because you are setting and assigning the value of the textarea to the "text" variable directly inside the click '.reply' System and at this time there is no content in the textarea yet.

To solve the problem just move the code snippet of the text variable definition, into the click system of the "Reset button".

The final Code will be as follows::

$(function() {
  $('.resposta').on("click", function() {
    var id = $(this).children('input').val();

    $(this).fadeOut("fast");

    $('.coment').find('.resp').fadeOut("slow", function() {
      $('.resposta').fadeIn("fast");
    });

    $(this).parents('.coment').find('.resp').fadeIn("slow");

    $('.resp').find('input').on("click", function() {
      var texto = $('.resp').find('#texto').val();

      alert(texto);
      //            $.post('swith/viwer.php',{
      //                acao: 'responder', id: id},
      //            function(){
      //                $('.visualizaron').fadeOut('slow');
      //            });
      return false;
    });

    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='comentar  fl-left'>
  <div class='coment com'>
    <p><small class='fontze1'>Comentado por:</small> Eu msm <small>Em:  </small> 07-04-2017 <small>As: </small> 17:14:00</p>

    <div class="comentando">
      <p>Este é um exemplo de comentário</p>
    </div>
    <div class='fl-right resposta'>Responder<input type='hidden' value='<?=$big[id] ?>' name='idcoment'>
    </div>
    <div class=' resp' style='display:none'>
      <form method='post' name="comentarios">
        <textarea id="texto"></textarea>
        <input class='btn btn-green' type='submit' value='responder' name='responder'>
      </form>
    </div>
  </div>