Перейти к содержимому


Показ/скрытие полей через JavaScript


Сообщений в теме: 319

#1 tel

    Активный участник

  • Пользователи
  • PipPipPip
  • 187 сообщений

Отправлено 11 Март 2011 - 18:04

есть ли возможность в 1.9.3 сделать авто показ/скрытие полей ?

например как только в списке мы выбираем один пункт (заказ на авто) - то сразу же ниже показываются поля - которые нужно заполнить для заказа именно авто.

а если мы выберем пункт (заказ катера) - то покажутся уже другие поля.

возможно это как то можно реализовать через ява скрипт.

в любом случае это очень удобно

#2 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 11 Март 2011 - 18:45

Да, такая возможность есть, собственно для этого в первую очередь и вводился JavaScript. Об этом кстати есть упоминание и в документации.

Для этого во-первых добавляете код события "onchange" (изменение поля) на сам список:
function onchange_{$one_field.id}()
{
  display_field(id1, document.getElementById('value{$one_field.id}').value=="заказ на авто");
  display_field(id2, document.getElementById('value{$one_field.id}').value=="заказ катера");
  // id1 и id2 - id тех полей, которые необходимо скрыть/отобразить, вместо них подставляете нужные вам номера
}
addHandler(document.getElementById('value{$one_field.id}'), 'onchange', onchange_{$one_field.id});
Во-вторых, добавляете видимость этих полей уже в их настройки (это нужно чтобы определять видимость поля при открытии записи, еще до изменения списка):
display_field({$one_field.id}, document.getElementById('valueID').value=="заказ на авто");
// ID заменяете на реальный id поля "список"

Вместо {$one_field.id} можно тоже вставлять сразу id текущего поля, как в документации на сайте. Это просто переменная, которая вставляет его автоматически.


ВНИМАНИЕ! Пример выше на текущий момент (2016 год) частично устарел (в частности, он не поддерживает работу с полями связи, даты и т.д., см. ниже по теме), поэтому в настоящее время рекомендуется следующий вариант (задача та же самая):

function onchange_{$one_field.id}()
{
  display_field(id1, $('#value{$one_field.id}').val()=="заказ на авто");
  display_field(id2, $('#value{$one_field.id}').val()=="заказ катера");
  // id1 и id2 - id тех полей, которые необходимо скрыть/отобразить, вместо них подставляете нужные вам номера
}
$(document).ready(onchange_{$one_field.id});
$('#value{$one_field.id}').change(onchange_{$one_field.id});

Код добавляется только в первое поле (которое меняется), в скрываемые поля добавлять код уже не нужно! Более того, если заменить {$one_field.id} на id изменяемого поля, то код в принципе может находится в любом месте.

ВАЖНО! Код в примере выше будет работать, только если поле {$one_field.id} (т.е. откуда берутся значения для сравнения) является редактируемым! Иначе необходимо использовать для скрытия/отображения полей правила доступа.

Общий алгоритм для js в полях таким образом такой:

function onchange_{$one_field.id}() // имя функции может быть любым, необязательно "onchange_{$one_field.id}", главное чтобы не повторялось в других местах
{
  // любой нужный вам js-код
}
$(document).ready(onchange_{$one_field.id}); // запускаем функцию при событии загрузки страницы (т.о. нужные поля могут сразу скрываться)
$('#value{$one_field.id}').change(onchange_{$one_field.id}); // запускаем ту же самую функцию при событии изменения поля

ВНИМАНИЕ! Любой JS код будет активен только в режиме редактирования основной записи, в режиме таблицы/подтаблицы JS код работать не будет!

Одна из причин этого - в разных строках таблицы могут быть разные значения, тогда как столбец с полем один на все строки. Скрыть же столбец "частично" невозможно.

Сообщение отредактировал CbCoder: 02 Март 2016 - 10:04


#3 tel

    Активный участник

  • Пользователи
  • PipPipPip
  • 187 сообщений

Отправлено 11 Март 2011 - 19:02

супер ....

вы просто этой версией - на новый уровень базу вывели ...

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

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

#4 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 11 Март 2011 - 19:08

Я же привел выше образец кода для отображения при открытии записи:

Просмотр сообщенияРазработчик (11.3.2011, 18:45) писал:

Во-вторых, добавляете видимость этих полей уже в их настройки (это нужно чтобы определять видимость поля при открытии записи, еще до изменения списка):
display_field({$one_field.id}, document.getElementById('valueID').value=="заказ на авто");
// ID заменяете на реальный id поля "список"
Второй аргумент функции display_field как раз отвечает за видимость поля. В данном примере в нем стоит условие, при котором поле отображается. Если условие не выполнено - поле скрыто.

#5 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 02 Июнь 2011 - 09:29

подмогните.

в таблице договор есть поле-список (предмет договора) состоит из:

Обучение (Екат)
Обучение выездной
Регистрация, настройка ПО
ОАЭФ
Конкурс (94 ФЗ)
Аукцион (Фас 67)
Конкурс (Фас 67)
Аукцион (ГК РФ)

Выбрать можно только одно.

И надо чтобы в зависимости от выбранного показывались только необходимые поля.

Мои действия:

1 добавляю в поле-список (предмет договора) в джава скрипт

function onchange_{$one_field.id}()
{
display_field(id10, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id11, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id12, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id13, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id14, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id15, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id16, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");
display_field(id10, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id11, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id12, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id13, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id14, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id15, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id16, document.getElementById('value{$one_field.id}').value=="Обучение выездной");
display_field(id8, document.getElementById('value{$one_field.id}').value=="Регистрация, настройка ПО");
display_field(id8, document.getElementById('value{$one_field.id}').value=="ОАЭФ");
display_field(id8, document.getElementById('value{$one_field.id}').value=="Конкурс (94 ФЗ)");
display_field(id8, document.getElementById('value{$one_field.id}').value=="Аукцион (Фас 67)");
display_field(id8, document.getElementById('value{$one_field.id}').value=="Конкурс (Фас 67)");
display_field(id8, document.getElementById('value{$one_field.id}').value=="Аукцион (ГК РФ)");
}
addHandler(document.getElementById('value{$one_field.id}'), 'onchange', onchange_{$one_field.id});


2. добавляю в поле 8

display_field({$one_field.id}, document.getElementById('value7').value=="Регистрация, настройка ПО");
display_field({$one_field.id}, document.getElementById('value7').value=="ОАЭФ");
display_field({$one_field.id}, document.getElementById('value7').value=="Конкурс (94 ФЗ)");
display_field({$one_field.id}, document.getElementById('value7').value=="Аукцион (Фас 67)");
display_field({$one_field.id}, document.getElementById('value7').value=="Конкурс (Фас 67)");
display_field({$one_field.id}, document.getElementById('value7').value=="Аукцион (ГК РФ)");

3. Добавляю в поля 11,12,13,14,15,16


display_field({$one_field.id}, document.getElementById('value7').value=="Обучение (Екат)");
display_field({$one_field.id}, document.getElementById('value7').value=="Обучение выездной");


Ничерта не пашет - как все поля показывались так и показываются.

Что то где то напутал


Я правильно понял - ID поля - это его номер порядковый номер под которым он в таблице стоит?

#6 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 02 Июнь 2011 - 09:41

или ID из PHPadmin берется ? (из таблицы) ?

#7 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 02 Июнь 2011 - 09:43

Цитата

Я правильно понял - ID поля - это его номер порядковый номер под которым он в таблице стоит?
Нет. ID поля показывается в адресной строке браузера при входе в настройки поля: "...edit_field.php?table=42&field=435". См. документацию

Во-вторых никакой строки "id" в аргументе функции display_field не пишется. В противном случае этот аргумент писался бы в кавычках как все нормальные строки. Пишется только сам ID в виде числа: display_field(111, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)");

#8 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 02 Июнь 2011 - 09:49

Просмотр сообщенияvolk358 (2.6.2011, 10:41) писал:

или ID из PHPadmin берется ? (из таблицы) ?
Можно и оттуда если Вам это удобнее. Таблица cb_fields.

#9 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 02 Июнь 2011 - 10:27

Сделал заработало спасибо. но теперь в другом вопрос

Сработало только на крайних точках

display_field({$one_field.id}, document.getElementById('value7').value=="Регистрация, настройка ПО");
display_field({$one_field.id}, document.getElementById('value7').value=="ОАЭФ");
display_field({$one_field.id}, document.getElementById('value7').value=="Конкурс (94 ФЗ)");
display_field({$one_field.id}, document.getElementById('value7').value=="Аукцион (Фас 67)");
display_field({$one_field.id}, document.getElementById('value7').value=="Конкурс (Фас 67)");
display_field({$one_field.id}, document.getElementById('value7').value=="Аукцион (ГК РФ)"); - срабатывает только когда ставишь Аукцион (ГК РФ),

Если ставишь Регистрация, настройка ПО или что то другое из этого списка - не срабатывает.

Может между ним надо какойто символ - "Или" - поставить?

Что бы система понимала что если выберут любой из указанный параметров надо показывать строки.

#10 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 02 Июнь 2011 - 10:40

Разумеется, необходим ИЛИ в условии. У Вас по сути одна и та же функция записана по несколько раз и в результате последующая перетирает действие предыдущей. Остается только действие последней.

display_field({$one_field.id}, document.getElementById('value7').value=="Регистрация, настройка ПО" || document.getElementById('value7').value=="ОАЭФ" || ....... );
или более читабельная запись:

if (document.getElementById('value7').value=="Регистрация, настройка ПО") display_field({$one_field.id}, 1);
else if (document.getElementById('value7').value=="ОАЭФ") display_field({$one_field.id}, 1);
......
else display_field({$one_field.id}, 0);


#11 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 02 Июнь 2011 - 11:14

еще вопрос функцию "ИЛИ" надо вставлять в джава скрипт полей (которые показываются / непоказываются) или списка (в котором выбор происходит) тоже? или в оба места сразу?

#12 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 02 Июнь 2011 - 11:36

Везде где задаете условия для видимости одного и того же поля. Причину я уже описал выше. От места это не зависит.

#13 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 02 Июнь 2011 - 12:02

долго маялся но получилось. кому надо выкладываю, может переделаете под себя.


Это в список

function onchange_{$one_field.id}()
{
display_field(1027, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1028, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1029, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1030, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1031, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1032, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1033, document.getElementById('value{$one_field.id}').value=="Обучение (Екат)" || document.getElementById('value{$one_field.id}').value=="Обучение выездной" );
display_field(1045, document.getElementById('value{$one_field.id}').value=="Регистрация, настройка ПО" || document.getElementById('value{$one_field.id}').value=="Аукцион (ГК РФ)" || document.getElementById('value{$one_field.id}').value=="ОАЭФ" || document.getElementById('value{$one_field.id}').value=="Конкурс (94 ФЗ)" || document.getElementById('value{$one_field.id}').value=="Аукцион (Фас 67)" || document.getElementById('value{$one_field.id}').value=="Конкурс (Фас 67)" );
}
addHandler(document.getElementById('value{$one_field.id}'), 'onchange', onchange_{$one_field.id});



Это в поле № 1045

display_field({$one_field.id}, document.getElementById('value1044').value=="Регистрация, настройка ПО" || document.getElementById('value1044').value=="Аукцион (ГК РФ)" || document.getElementById('value1044').value=="ОАЭФ" || document.getElementById('value1044').value=="Конкурс (94 ФЗ)" || document.getElementById('value1044').value=="Аукцион (Фас 67)" || document.getElementById('value1044').value=="Конкурс (Фас 67)" );


Это в ост поля

display_field({$one_field.id}, document.getElementById('value1044').value=="Обучение (Екат)" || document.getElementById('value1044').value=="Обучение выездной" );

#14 tel

    Активный участник

  • Пользователи
  • PipPipPip
  • 187 сообщений

Отправлено 02 Июнь 2011 - 22:42

а зачем у Вас много раз "Обучение выездной" забивается в код?

#15 volk358

    Активный участник

  • Пользователи
  • PipPipPip
  • 32 сообщений

Отправлено 03 Июнь 2011 - 05:58

там 6 полей показывается при "обучение екат) и при обучение выездной

#16 Playbobrik

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 16 Июль 2011 - 03:05

Огромное Вам спасибо за эту тему! Именно то, что искал уже давно. Отдельное спасибо за эту отличную функцию.

#17 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 04 Август 2011 - 12:07

Поле типа "связь". В зависимости от значения этого поля нужно скрывать определенные поля.
Чтобы проверить, что какое значение храниться в этом поле применил код
var Nazvanie_dokumenta=document.getElementById('value981').value;
  alert("onchange: "+Nazvanie_dokumenta);
Получаем, например: "onchange: 4". Т.е. получаем ID значения в этом поле, как и должно быть.
Но если я проверяю значение этого поля и хочу скрыть поле 987 при помощи кода
display_field(987, document.getElementById('value{$one_field.id}').value==4);
то условие не срабатывает. Пробовал также value=="4", все равно не получается.
Подскажите, плз, как проверить значение поля связи.

#18 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 04 Август 2011 - 14:00

Так у Вас поле 987 должно скрываться или показываться при значении поля связи = 4 ? Что именно не работает то?

Проверил у себя - все работает. Если разумеется правильно проставить id полей.

#19 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 04 Август 2011 - 14:19

Просмотр сообщенияРазработчик (4.8.2011, 14:00) писал:

Так у Вас поле 987 должно скрываться или показываться при значении поля связи = 4 ? Что именно не работает то?

Проверил у себя - все работает. Если разумеется правильно проставить id полей.

Должно показываться. Полный код такой:
// Изменение отображения поля Название документа, при загрузке страницы
// display_field(981,0);

function on_change_Nazvanie_dokumenta()
{ // Изменение значения поля Название документа
 // var Nazvanie_dokumenta=document.getElementById('value981').value;
  //alert("onchange: "+Nazvanie_dokumenta);
  display_field(987, document.getElementById('value{$one_field.id}').value==4);
};


addHandler(document.getElementById('value981'),   'onchange', on_change_Nazvanie_dokumenta);


#20 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 687 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 04 Август 2011 - 14:46

Не работает присвоение события на изменение для полей типа "связь". Причины попробуем устранить.





Количество пользователей, читающих эту тему: 4

0 пользователей, 4 гостей, 0 анонимных


  • Google