Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вывод текста в зависимости от выбранного радио переключателя

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

GORKOMXO3



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Всем доброго времени суток!
Я совсем новичок, бьюсь над задачей второй день и не чего не получается. Пожалуйста подскажите или пните в нужное направление.
 
Стоит следующая задача: есть некая форма с радио переключателями, сама форма помещена в таблицу из двух колонок, радио переключатели в одной колонке, формируемый текст в другой колонке и в зависимости от того какой переключатель выбрал пользователь рядом формируется "налету" текст.
 
В интернете массу примеров, но все они сводятся к обработке одной группы радио переключателей. Мне же надо достичь следующего, например:
 

Код:
 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">    
    <title>Работа с Radio Button в JQuery - Snipp.ru</title>
    
</head>
<body style="font-size: 14px; position: relative; padding: 15px 20px;">
    <table width="200" border="1">
  <tbody>
    <tr>
      <td>
        <p>
    <label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
    <label><input type="radio" name="radio" value="2"> Radio Button 2</label><br>
    <label><input type="radio" name="radio" value="3"> Radio Button 3</label>
</p>
        </td>
      <td>
        <div class="block-text" id="block-1">
    Блок текста №1
</div>
 
<div class="block-text" id="block-2">
    Блок текста №2
</div>
 
<div class="block-text" id="block-3">
    Блок текста №3
</div>
        </td>
    </tr>
    <tr>
      <td>
        <p>
    <label><input type="radio" name="radio1" value="4"> Radio Button 4</label><br>
    <label><input type="radio" name="radio1" value="5"> Radio Button 5</label><br>
    <label><input type="radio" name="radio1" value="6"> Radio Button 6</label>
</p>
        </td>
      <td>
          <div class="block-text" id="block-4">
    Блок текста №4
</div>
 
<div class="block-text" id="block-5">
    Блок текста №5
</div>
 
<div class="block-text" id="block-6">
    Блок текста №6
</div>
          </td>
    </tr>
  </tbody>
</table>
 
    
 
 
 
 
<style type="text/css">
.block-text {
    display: none;
    
}
</style>
 
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[name="radio"]').click(function(){
    var target = $('#block-' + $(this).val());
 
    $('.block-text').not(target).hide(0);
    target.fadeIn(500);
});
</script>
</body>
</html>
 

 
С первым блоком радио переключателей (Radio Button 1, Radio Button 2, Radio Button 3) скрипт справляется замечательно и в ячейку таблицы рядом выводит текст в зависимости от выбора этих переключателей.
Но вот как заставить скрипт так же обрабатывать и давать результата со второй группой радио переключателей (Radio Button 4, Radio Button 5, Radio Button 6)?

Всего записей: 6 | Зарегистр. 07-08-2011 | Отправлено: 11:14 17-05-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
GORKOMXO3
Есть же тема Вопросы по jQuery
 

Цитата:
Но вот как заставить скрипт так же обрабатывать и давать результата со второй группой


Цитата:
$('input[name^="radio"]').click(function(){  

И лучше не click, а  
$(document).on('change', ':radio', function(){
Это если других, иных радио кнопок нет. Иначе добавить атрибут как выше.
 
Ну и прятать текст надо не так. Напишу позже как, сейчас неудобно на планшете набирать.
Хотя бы просто target.siblings('.block-text').hide()

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 11:48 17-05-2020 | Исправлено: Mavrikii, 11:59 17-05-2020
GORKOMXO3



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii, спасибо, что откликнулись и не прошли мимо.
 
Не совсем то, что пытаюсь достичь.
 
Если изменить код и вставить
 

Код:
 
$('input[name^="radio"]').click(function(){
 

 
или  
 

Код:
 
$(document).on('change', ':radio', function(){
 

 
то действительно и второй блок радио переключателей (Radio Button 4, Radio Button 5, Radio Button 6) отрабатывает, НО при этом пропадает результат (текст) от работы первого блока (Radio Button 1, Radio Button 2, Radio Button 3), при этом переключатель первого блока остается в том положении в котором его оставил пользователь, но вот в ячейке для текста первого блока при переключении второго блока текст пропадает.
 
Подробнее, что я имею ввиду на картинке:
[img]
https://ibb.co/h8drvNv
[/img]
 

Всего записей: 6 | Зарегистр. 07-08-2011 | Отправлено: 12:18 17-05-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
GORKOMXO3
Читайте внимательно сообщение целиком.
 

Цитата:
Ну и прятать текст надо не так. Напишу позже как, сейчас неудобно на планшете набирать.  
Хотя бы просто target.siblings('.block-text').hide()


Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 12:21 17-05-2020 | Исправлено: Mavrikii, 12:22 17-05-2020
GORKOMXO3



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii, простите не дочитал.
 
Все равно что-то не получается, исчезает текст из первой группы при работе со второй.
 
Если можно подскажите с этим кодом в совокупности.
 
Я подожду когда Вам будет удобнее.
 
Еще раз спасибо, за терпение и помощь.

Всего записей: 6 | Зарегистр. 07-08-2011 | Отправлено: 12:32 17-05-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
GORKOMXO3

Цитата:
исчезает текст из первой группы при работе со второй.  

Вместо

Цитата:
$('.block-text').not(target).hide(0)

Написать

Цитата:
 target.siblings('.block-text').hide()


Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 12:34 17-05-2020
GORKOMXO3



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii, спасибо, круто, заработало как надо!
 
Вы мне очень помогли, жаль нет кнопки на форуме +в карму или еще что-то)
 
Добавлено:
Mavrikii, реализовывая все выше указанное я упустил очень важное и сам в этом виноват , ведь эти радио переключатели в итоге нужны не только для того что бы выводить тот или иной текст из блоков, но они еще и являются частью формы которая должна как раз отправлять дальше в переменных содержание выбранных блоков, а поскольку в свойствах input type="radio" свойство value уже заданно "железно", (именно по нему происходит) выборка блоков текста, то из формы передается значения этих value, а мне нужно было, что бы передавался текст блока для дальнейшей обработки.
Вот думаю как теперь быть.
 
Вот код что сейчас имею:
 

Код:
 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">    
    <title>Работа с Radio Button в JQuery - Snipp.ru</title>
    
</head>
<body style="font-size: 14px; position: relative; padding: 15px 20px;">
    <table width="200" border="1">
        <!--форма обработки-->
        <form action="obrabotra.php" method="post" target="_self">
  <tbody>
    <tr>
      <td>
        <p>
    <label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
    <label><input type="radio" name="radio" value="2"> Radio Button 2</label><br>
    <label><input type="radio" name="radio" value="3"> Radio Button 3</label>
</p>
        </td>
      <td>
        <div class="block-text" id="block-1">
    Блок текста №1
</div>
 
<div class="block-text" id="block-2">
    Блок текста №2
</div>
 
<div class="block-text" id="block-3">
    Блок текста №3
</div>
        </td>
    </tr>
    <tr>
      <td>
        <p>
    <label><input type="radio" name="radio1" value="4"> Radio Button 4</label><br>
    <label><input type="radio" name="radio1" value="5"> Radio Button 5</label><br>
    <label><input type="radio" name="radio1" value="6"> Radio Button 6</label>
</p>
        </td>
      <td>
          <div class="block-text" id="block-4">
    Блок текста №4
</div>
 
<div class="block-text" id="block-5">
    Блок текста №5
</div>
 
<div class="block-text" id="block-6">
    Блок текста №6
</div>
          </td>
    </tr>
  </tbody>
            <input style="background: #C4FFC4; border: 2px solid #000000; color: #B90000" name="ok" type="submit" value="Сформировать" />
        </form>
</table>
 
    
 
<style type="text/css">
.block-text {
    display: none;
    
}
</style>
 
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).on('change', ':radio', function(){
    var target = $('#block-' + $(this).val());
 
    target.siblings('.block-text').hide();
    target.fadeIn(500);
});
</script>
</body>
</html>
 


Всего записей: 6 | Зарегистр. 07-08-2011 | Отправлено: 12:39 17-05-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
GORKOMXO3

Цитата:
что бы передавался текст блока для дальнейшей обработки.

зачем, если он статический? вы и так передаете id блока на сервер, ну так храните и там копию текста.
иначе текст должен быть в hidden элементе, ну или с jquery можно обрабатывать перед отправкой и копировать в него показываемый текст. но не вижу смысла в этом.
 
либо, если текст уже в textarea, то можно просто выставлять атрибут disabled невидимым элементам - в данной ситуации они не будут отправлены на сервер.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 19:29 17-05-2020 | Исправлено: Mavrikii, 22:23 17-05-2020
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вывод текста в зависимости от выбранного радио переключателя


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru