Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.12.2023, 23:28
Новичок на форуме
Отправить личное сообщение для Grinag Посмотреть профиль Найти все сообщения от Grinag
 
Регистрация: 31.12.2023
Сообщений: 3

Нужно чтобы при выборе пункта селектора "Другое" появлялось еще одно поле.
Здравствуйте. Ника не могу понять как сделать вроде бы простую вещь. Прочитал много в интернете, но все никак не могу "уговорить" элемент работать как нужно.

Есть вот такой кусок кода:

<div class="col-md-6">
  <label for="inputState" class="form-label px-4">Должность</label>
  <select name="inputState" id="inputState" class="form-select px-4">
    <option></option>
    <option value="Должность 1">Должность 1</option>
    <option value="Должность 2">Должность 2</option>
    <option value="Должность 3">Должность 3</option>
    <option value="Должность 4">Должность 4</option>
    <option value="Должность 5">Должность 5</option>
    <option value="Другое">Другое</option>
  </select>
</div>
<div class="col-md-6">
  <label for="hand_input" class="form-label">Введите вашу должность</label>
  <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
</div>
<div class="col-12">
  <button type="submit" class="btn btn-primary">Следующий шаг</button>
</div>


Нужно сделать так, чтобы изначально поле ручного вводы было скрыто, и только если пользователь выбрал в селекторе вариант "Другое", оно появилось и можно было ввести значение вручную.
Подскажите пожалуйста как это сделать.
Ответить с цитированием
  #2 (permalink)  
Старый 01.01.2024, 03:44
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

<div class="col-md-6">
  <label for="inputState" class="form-label px-4">Должность</label>
  <select name="inputState" id="inputState" class="form-select px-4">
    <option></option>
    <option value="Должность 1">Должность 1</option>
    <option value="Должность 2">Должность 2</option>
    <option value="Должность 3">Должность 3</option>
    <option value="Должность 4">Должность 4</option>
    <option value="Должность 5">Должность 5</option>
    <option value="Другое">Другое</option>
  </select>
</div>
<div class="col-md-6 other-form" hidden>
  <label for="hand_input" class="form-label">Введите вашу должность</label>
  <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
</div>
<div class="col-12">
  <button type="submit" class="btn btn-primary">Следующий шаг</button>
</div>


document.addEventListener('DOMContentLoaded', () => {
  const otherForm = document.querySelector('.other-form');

  document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
    otherForm.hidden = currentTarget.value !== 'Другое';
  });
});
Ответить с цитированием
  #3 (permalink)  
Старый 01.01.2024, 20:00
Новичок на форуме
Отправить личное сообщение для Grinag Посмотреть профиль Найти все сообщения от Grinag
 
Регистрация: 31.12.2023
Сообщений: 3

Почему-то не работает... Вставляю в код в конце формы вот так:
<div class="col-md-6">
              <label for="inputState" class="form-label px-4">Должность</label>
              <select name="inputState" id="inputState" class="form-select px-4">
                <option></option>
                <option value="Должность 1">Должность 1</option>
                <option value="Должность 2">Должность 2</option>
                <option value="Должность 3">Должность 3</option>
                <option value="Должность 4">Должность 4</option>
                <option value="Должность 5">Должность 5</option>
                <option value="Другое">Другое</option>
              </select>
            </div>
            <div class="col-md-6 other-form" hidden>
              <label for="hand_input" class="form-label">Введите вашу должность</label>
              <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Следующий шаг</button>
            </div>
           <script>
            document.addEventListener('DOMContentLoaded', () => {
              const otherForm = document.querySelector('.other-form');
            
              document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
                otherForm.hidden = currentTarget.value !== 'Другое';
              });
            });
           </script>


На странице все равно не появляется пункт "Введите вашу должность" ((( https://disk.yandex.ru/i/VDlMz5vsiFKqtg

С чем может быть связано?

Последний раз редактировалось Grinag, 01.01.2024 в 20:02.
Ответить с цитированием
  #4 (permalink)  
Старый 01.01.2024, 20:03
Новичок на форуме
Отправить личное сообщение для Grinag Посмотреть профиль Найти все сообщения от Grinag
 
Регистрация: 31.12.2023
Сообщений: 3

Может я куда-то не туда вставляю код?
Ответить с цитированием
  #5 (permalink)  
Старый 01.01.2024, 20:26
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Вроде все работает
<div class="col-md-6">
              <label for="inputState" class="form-label px-4">Должность</label>
              <select name="inputState" id="inputState" class="form-select px-4">
                <option></option>
                <option value="Должность 1">Должность 1</option>
                <option value="Должность 2">Должность 2</option>
                <option value="Должность 3">Должность 3</option>
                <option value="Должность 4">Должность 4</option>
                <option value="Должность 5">Должность 5</option>
                <option value="Другое">Другое</option>
              </select>
            </div>
            <div class="col-md-6 other-form" hidden>
              <label for="hand_input" class="form-label">Введите вашу должность</label>
              <input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Следующий шаг</button>
            </div>
           <script>
            document.addEventListener('DOMContentLoaded', () => {
              const otherForm = document.querySelector('.other-form');
             
              document.getElementById('inputState').addEventListener('change', ({ currentTarget }) => {
                otherForm.hidden = currentTarget.value !== 'Другое';
              });
            });
           </script>
Ответить с цитированием
  #6 (permalink)  
Старый 01.01.2024, 20:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Код надо вставлять туда, куда обычно вставляются скрипты.
В <head> как код или в отдельный файл или в конец <body>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При выборе определенного пункта select'а появляется еще поле MasterDmx Элементы интерфейса 3 03.06.2014 17:13
Такое возможно? При выборе radio надо чтобы менялось значение в input Stas111111 Общие вопросы Javascript 11 23.05.2014 00:41
Как можно сделать при выборе пункта меню что бы появлялась кнопка? Annchousinka Элементы интерфейса 1 30.09.2013 15:38
при выборе элемента из списка появляется еще один список maratmm Элементы интерфейса 0 07.08.2012 17:06
Нужно при вводе в текстовое поле тут же отобразить данный в другом месте klubnichkaaa AJAX и COMET 3 20.10.2011 20:46