Unable to get text from textarea using jquery

Question

I have a problem with my jquery script, for some reason the top two buttons are displaying undefined instead of doing what buttons underneath do.

Can someone tell me what I did wrong? I need the two buttons on the top working as the button underneath.

HTML:

<table class="form-table">
<tbody>
<tr>
<th scope="row">Typ</th>
<td>
<button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button>
<button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button>
</td>
</tr>
<tr>
<th scope="row">Code HTML</th>
<td>
<button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button>
<button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button>
<div class="form">
<textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea>
</div>
</td>
</tr>
</tbody>
</table>

JS:

$(function(){
  $(".IMGtoHTML").click(function() {
    var url = $(this).next().next('.form').find('textarea').val();
    var display_html = '<img src="'+url+'">';
    $(this).next().next('.form').find('textarea').val(display_html);
  });
});
$(function(){
  $(".FLASHtoHTML").click(function() {
    var url = $(this).next('.form').find('textarea').val();
    var display_html = '<img src="'+url+'">';
    $(this).next('.form').find('textarea').val(display_html);
  });
});

Demo here: https://jsfiddle.net/hd4uao12/

Answer 1

Your click handler won't work for the top two buttons, since $(this).next().next('.form') will yield an empty jQuery object. Instead, I would replace finding the textarea with an id based selector: $('#code_g1').val() .

Answer 2

Your path was incorrect.

from: var url = $(this).next().next('.form').find('textarea').val();

to: var url = $('#code_g1').val();

 $(document).ready(function(){ $(function(){ $(".IMGtoHTML").click(function() { var url = $('#code_g1').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); $(function(){ $(".FLASHtoHTML").click(function() { var url = $('#code_g1').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); }); 

 textarea { width:350px; height:100px; } 

 <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 3

Do you want something like that ?

 $(function(){ $(".IMGtoHTML").click(function() { var url = $(this).parents('.form-table').find('.form').find('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); $(function(){ $(".FLASHtoHTML").click(function() { var url = $(this).parents('.form-table').find('.form').find('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 4

As per your html structure $(this).next().next('.form') will only work for bottom buttons. Use $('.form').find('textarea').val()

Answer 5

Maybe what you are trying to do is this:

 $(function(){ $(".IMGtoHTML").click(function() { var url = $('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').text(display_html); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 6

You just need to change the "val()" to ".text()"

    $(function(){
  $(".IMGtoHTML").click(function() {
    var url = $(this).next().next('.form').find('textarea').text();
    var display_html = '<img src="'+url+'">';
    $(this).next().next('.form').find('textarea').val(display_html);
  });
});
$(function(){
  $(".FLASHtoHTML").click(function() {
    var url = $(this).next('.form').find('textarea').text();
    var display_html = '<img src="'+url+'">';
    $(this).next('.form').find('textarea').val(display_html);
  });
});

Thanks