Не удается получить текст из текстовой области с помощью jquery

ProgramBox

Не удается получить текст из текстовой области с помощью jquery

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня проблема с моим скриптом jquery, по какой-то причине две верхние кнопки отображают undefined вместо того, чтобы делать то, что делают кнопки внизу.

Кто-нибудь может сказать мне, что я сделал не так? Мне нужно, чтобы две кнопки сверху работали как кнопка внизу.

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);
  });
});

Демонстрация здесь:https://jsfiddle.net/hd4uao12 /

1. Извините, моя ошибка — должно быть так: jsfiddle.net/u6byatfk

2. Согласно вашей html-структуре $ (this).next().next(‘.form’) будет работать только для нижних кнопок. Используйте $(‘.form’).find(‘textarea’).val().

3. К сожалению, я не могу его использовать, потому что я планирую разместить на веб-сайте несколько подобных форм. Если я сделаю $ (‘.form’).find(‘textarea’).val(), то одно и то же содержимое будет отправлено во все текстовые области jsfiddle.net/cknytax0/1 — Я хочу, чтобы содержимое переходило в ближайшую текстовую область к кнопке.

4. У вас есть несколько элементов с одним и тем же id ( type_g1 ): это недопустимый HTML. Хотя это не повлияет на этот вопрос, у вас, вероятно, возникнут другие проблемы.

Ответ №1:

Вы хотите что-то подобное?

 $(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>

1. К сожалению, у меня это не сработает, потому что мне нужно иметь несколько подобных форм на веб-сайте. Содержимое будет размещено во всей текстовой области jsfiddle.net/wo4vujx0/1

2. Извините! это действительно работает! СПАСИБО, мне просто нужно изменить $ (‘textarea’).val(display_html); на $(this).parents(‘.form-table’).find(‘.form’).find(‘textarea’).val();

Ответ №2:

Ваш обработчик кликов не будет работать для двух верхних кнопок, поскольку $(this).next().next('.form') выдаст пустой объект jQuery. Вместо этого я бы заменил поиск текстовой области селектором на основе идентификатора: $('#code_g1').val() .

Ответ №3:

Ваш путь был неправильным.

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

кому: 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>

Ответ №4:

Согласно вашей html-структуре $ (this).next().next(‘.form’) будет работать только для нижних кнопок. Используйте $(‘.form’).find(‘textarea’).val()

Ответ №5:

Возможно, вы пытаетесь сделать это:

 $(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>

Ответ №6:

Вам просто нужно изменить «val()» на «.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);
  });
});

Спасибо