0 Пользователей и 1 Гость просматривают эту тему.
  • 17 Ответов
  • 581 Просмотров
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Добрый день,
Подскажите пожалуйста

Форма ввода данных по объекту.
Скрытие полей в зависимости от select с #prop_type
Есть поле (тип): Дом, Квартира, Земельный участок

Например:
При выборе в поле (тип): "Дом" - скрыть поля:

<div class="form-group">
   <label for="prop_title">Заголовок</label>
   <input required="" name="prop_title" id="prop_title" value="" type="text">
</div>
<div class="form-group">
   <label for="prop_subtitle">Под заголовок</label>
   <input required="" name="prop_subtitle" id="prop_subtitle" value="" type="text">
</div>

При выборе в поле (тип) - другого значение, скрыть другие поля.
Вывод значение "value":
Код
<?php
$e2='<div id="output"></div>';
echo $e2;
?>
<script>
    document.querySelector('#prop_type').onchange = function() {
    output.innerHTML = this.value;
   }
</script>

Скрытие полей по id (display: none;) в зависимости от значение value в select #prop_type ?
Много страничная форма.
Или в неправильно правлении пошел.
« Последнее редактирование: 07.05.2021, 12:55:28 от warlocksp »
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Если значение value = 373

Код
<script>
jQuery(document).ready(function() {
 jQuery('#prop_type').change(function() {
  if($(this).val() === "373")
   {
    $("#cargo_weight").css("display", "block");
   }
   else
   {
    $("#cargo_weight").css("display", "none");
   }
 });
});
</script>

<div id="cargo_weight">поле для скрытия</div>

Не работает  *ОХ-Х-Х*
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Потому что $(this) это select
а value находиться в <option value="373" selected="selected">*373*</option> - не наталкивает Вас на мысль ?
-----
$(this).find('option:selected').val()
----
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Потому что $(this) это select
а value находиться в <option value="373" selected="selected">*373*</option> - не наталкивает Вас на мысль ?
-----
$(this).find('option:selected').val()
----
:laugh:
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
А еще - когда у Вас $ - вдруг стал jQuery ??
Наверное будет правильно его определить локально
Код
jQuery('#prop_type').change(function() {
    var $ = jQuery ; 
    ...........

Если значение value = 373

так если 373 то скрыть ? - то у Вас обратно написано
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
jQuery(document).ready(function() {
 jQuery('#prop_type').change(function() {

Второй раз попадаю с select :), просто тут JS
Передать переменную из select?

Да, на оборот написал:)
Вот что получилось:
Код
<script>
    document.querySelector('#prop_type').onchange = function() {
output.innerHTML = this.value;/*вывод значение "value" в id="output"-для себя*/

  if(jQuery(this).find('option:selected').val()!= "373")
   {
    jQuery("#cargo_weight").css("display", "block");
   }
   else
   {
    jQuery("#cargo_weight").css("display", "none");
   }
   }
</script>

Правильно, сделал?
Вроде работает или как то оптимизировать можно.
« Последнее редактирование: 07.05.2021, 17:00:54 от warlocksp »
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
gartes - подскажи пожалуйста, возможно ли скрыть и label если у ней нет id.

Вот поля как выглядят:
<div class="form-group">
   <label for="prop_title">Заголовок</label>
   <input required="" name="prop_title" id="prop_title" value="" type="text">
</div>
<div class="form-group">
   <label for="prop_subtitle">Под заголовок</label>
   <input required="" name="prop_subtitle" id="prop_subtitle" value="" type="text">
</div>
« Последнее редактирование: 07.05.2021, 17:00:28 от warlocksp »
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Вроде работает, или как то оптимизировать можно
;D
Код
document.addEventListener("DOMContentLoaded", function (evt) {
            document.querySelector('#prop_type').addEventListener('change', (event) => {
                var  cargo_weight = document.querySelector('#cargo_weight')
                if(+event.target.value !== 373){
                    cargo_weight.style.display = "none"
                }else {
                    cargo_weight.style.display = "block"
                }
            });                   
        } , { passive : true });
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
подскажи пожалуйста, возможно ли скрыть и label если у ней нет id.
так а целиком <div class="form-group"> - прятать не проще ?
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
так а целиком <div class="form-group"> - прятать не проще ?

Согласен с Вами, что блок целиком лучше.
Как мне его привязать.
И возможно поехать верстка - если есть вариант попробовать нужно.

JS сам не сделаю.

Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Re: Скрытие полей в зависимости от select?
« Ответ #10 : 07.05.2021, 17:32:51 »
JS сам не сделаю.
:laugh:
Код
document.addEventListener("DOMContentLoaded", function (evt) {
            document.querySelector('#prop_type').addEventListener('change', (event) => {
                var  hideDiv = document.querySelector('[name="prop_title"]').closest('.form-group')
                if(+event.target.value !== 373){
                    hideDiv.style.display = "none"
                }else {
                    hideDiv.style.display = "block"
                }
            });
        } , { passive : true });
Удачи Вам ! Учите Javascript ! )))
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Скрытие полей в зависимости от select?
« Ответ #11 : 07.05.2021, 17:36:25 »
Спасибо большое... ;D
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Скрытие полей в зависимости от select?
« Ответ #12 : 07.05.2021, 17:41:56 »
Еще раз спасибо
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
Re: Скрытие полей в зависимости от select?
« Ответ #13 : 07.05.2021, 17:45:32 »

gartes - подскажи пожалуйста, возможно ли скрыть и label если у ней нет id.

Вот поля как выглядят:
<div class="form-group">
   <label for="prop_title">Заголовок</label>
   <input required="" name="prop_title" id="prop_title" value="" type="text">
</div>
<div class="form-group">
   <label for="prop_subtitle">Под заголовок</label>
   <input required="" name="prop_subtitle" id="prop_subtitle" value="" type="text">
</div>
А где тут ваша недвижимость ?)
Это в инете есть ?  - дайте ссылку !
ну или код так как есть !
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Скрытие полей в зависимости от select?
« Ответ #14 : 07.05.2021, 17:55:19 »
Это как пример с "Недвижимостью" привел.
Все работает, просто местами поменял:
                    hideDiv.style.display = "none"
                }else {
                    hideDiv.style.display = "block"


Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

gartes

  • Завсегдатай
  • 1859
  • 142 / 6
  • Е = mс²
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Скрытие полей в зависимости от select?
« Ответ #16 : 11.05.2021, 10:59:52 »
Как указывать несколько полей сразными именами:
name="prop_title1", name="prop_title2", name="prop_title3"

Как правильно прописать в этой строке?
var  hideDiv = document.querySelector('[name="prop_title1"]').closest('.form-group')
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Скрытие полей в зависимости от select?
« Ответ #17 : 11.05.2021, 11:46:12 »
Че то у меня большой получился:)
Код
<script>
document.addEventListener("DOMContentLoaded", function (evt) {
            document.querySelector('#prop_type').addEventListener('change', (event) => {
hideDiv1 = document.querySelector('[name="d183d0bad0bbd0bed0bd"]').closest('.field-detail')
hideDiv2 = document.querySelector('[name="d0b7d0b5d0bbd0b5d0bdd18bd0b5-d0bdd0b0d181d0b0d0b6d0b4d0b5d0bdd0b8d18f"]').closest('.field-detail')
hideDiv3 = document.querySelector('[name="d0bad0bbd0b0d181d181d0b8d184d0b8d0bad0b0d186d0b8d18f-d0bdd0b5d0b4d0b2d0b8d0b6d0b8d0bcd0bed181d182d0b8"]').closest('.field-detail')
hideDiv4 = document.querySelector('[name="d0bad0bed0bcd0bdd0b0d182-d0b2-d0bad0b2d0b0d180d182d0b8d180d0b5"]').closest('.field-detail')
hideDiv5 = document.querySelector('[name="d0bad0bed0bbd0b8d187d0b5d181d182d0b2d0be-d181d0bfd0b0d0bbd0b5d0bd"]').closest('.field-detail')
hideDiv6 = document.querySelector('[name="d0bad0bed0bbd0b8d187d0b5d181d182d0b2d0be-d0b2d0bdd183d182d180d0b5d0bdd0bdd0b8d185-d0bfd0bed0bcd0b5d189d0b5d0bdd0b8d0b9"]').closest('.field-detail')
if(
(+event.target.value !== 373)&
(+event.target.value !== 627)&
                (+event.target.value !== 624)&
                (+event.target.value !== 626)&
                (+event.target.value !== 625)
          ){
                    hideDiv1.style.display = "block"
                    hideDiv2.style.display = "block"
                    hideDiv3.style.display = "block"
                    hideDiv4.style.display = "block"
                    hideDiv5.style.display = "block"
                    hideDiv6.style.display = "block"
                }else {
                    hideDiv1.style.display = "none"
                    hideDiv2.style.display = "none"
                    hideDiv3.style.display = "none"
                    hideDiv4.style.display = "none"
                    hideDiv5.style.display = "none"
                    hideDiv6.style.display = "none"
                  }
            });
        } , { passive : true });
</script>

Может можно сократить?
« Последнее редактирование: 11.05.2021, 12:01:04 от warlocksp »
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Столкнулся с ошибкой Call to undefined function select() при запросе к БД

Автор denism300

Ответов: 3
Просмотров: 836
Последний ответ 16.11.2016, 12:08:41
от denism300
Вывод цены в зависимости от времени и дня недели

Автор baskethome

Ответов: 6
Просмотров: 1519
Последний ответ 13.02.2015, 13:51:43
от Arkadiy
jquery.validation: работа с select и вывод сообщений о несоответствиях

Автор AlekVolsk

Ответов: 15
Просмотров: 4092
Последний ответ 07.09.2014, 20:57:14
от AlekVolsk
[Решено] Вопрос по событию jQuery (select option value)

Автор ELLE

Ответов: 1
Просмотров: 4012
Последний ответ 16.04.2013, 03:37:46
от Aleks.Denezh