Есть ли способ скрыть разделы формы с помощью JavaScript? - PullRequest
Новая
       1

Есть ли способ скрыть разделы формы с помощью JavaScript?

0 голосов
/ 27 мая 2019

Я пытаюсь создать динамическую форму. У меня есть разделы формы построены. В заголовке формы есть выпадающий вариант с пятью опциями, относящимися к пяти разделам формы. Я хочу скрыть все разделы до тех пор, пока не будет выбрана опция раскрывающегося списка, раскрывающая соответствующий раздел.

Я пытаюсь сделать это без Jquery, так как я пытаюсь развивать свои навыки JavaScript 

    <label for="issueDescInput">Date of Requests</label>
        <br>
     <input type="date" class="form-control" id="issueSeverityInput">
        <br>

        <label for="TOR">Tasks</label>
         <select class="form-control" id="issueSeverityInput">
          <option value="CO">Task 1</option>
          <option value="ASM">task 2</option>
          <option value="SM">task 3</option>
          <option value="AM">Task 4</option>
          <option value="RC">Task 5</option>
        </select>

       <div class="Tasks-section">
        <div class="Task 1">

      <p>test</p>

       </div>  
       </div>

     var select = document.getElementById('TOR'),
     onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == "SM";

    document.getElementById('hidden_div').style.display = shown ? 'block' 
  : 'none';
};

Ответы [ 2 ]

1 голос
/ 27 мая 2019

Я думаю, что вы можете взглянуть на этот образец, используя чистый JavaScript, я уже сделал Codepen :

Небольшое изменение было внесено в HTML для облегчения работы.

https://codepen.io/DieByMacro/pen/arKaRX

(function() {
  const selectOption = document.querySelector('#issueSeverityInput');
  const tasks = document.querySelectorAll('.task-section');
  const cssVisible = 'is-visible';
  
  // Add select onChange event handler
  selectOption.addEventListener('change', onChangeHandler );
  
  // Calling trigger to check current selected value and update at first time
  triggerSelect();
  
  function triggerSelect() {
    // Get the current selected at first load
    const currentSelect = selectOption[selectOption.selectedIndex].value
    
    // Update the task
    updateCurrentTask(currentSelect)
  }
  
  function updateCurrentTask(value) {
    // Find the correct task to update by adding/removing CSS `is-visible` class
    for(const task of tasks) {
      if (task.getAttribute('data-value') === value ) {
        task.classList.add(cssVisible)
      } else task.classList.remove(cssVisible)
    }
  }
  
  function onChangeHandler(event) {
    console.log('Selected: ', event.currentTarget.value);
    updateCurrentTask(event.currentTarget.value);
  }
})();
/*
We init the task-section by hiding it. Then later we will use js to toggle class `is-visible` 
*/
.task-section {
  display: none;
}
.task-section.is-visible {
  display: block;
}
<label for="TOR">Tasks</label>
<select class="form-control" id="issueSeverityInput">
  <option value="1">Task 1</option>
  <option value="2">task 2</option>
  <option value="3">task 3</option>
  <option value="4">Task 4</option>
  <option value="5">Task 5</option>
</select>

<div class="tasks-wrapper">
  <div class="task-section" data-value="1">
    <p>This is task 1</p>
  </div>
  <div class="task-section" data-value="2">
    <p>This is task 2</p>
  </div>
  <div class="task-section" data-value="3">
    <p>This is task 3</p>
  </div>
  <div class="task-section" data-value="4">
    <p>This is task 4</p>
  </div>
  <div class="task-section" data-value="5">
    <p>This is task 5</p>
  </div>
</div>
0 голосов
/ 28 мая 2019

JavaScript
Есть несколько проблем с настоящим JS:

Выпуск № 1
Property Свойство при событии должно быть добавлено к объекту с помощью точечной нотации и должно быть в нижнем регистре. Оператор запятой включает в себя объявление select, а затем завершается ошибкой. 

var select = document.getElementById('TOR'), 
onChange = function(event) {...

? Сначала объявите переменную для ссылки на объект DOM, затем используйте точечную запись, чтобы связать свойство on-event с переменной. 

var select = document.getElementById('TOR');
select.onchange = function(event) {...

Выпуск № 2
? Я предполагаю, что следующей строкой было присвоить значение текущей выбранной опции, потому что следующая строка использует это ... вроде ... я думаю. В любом случае == предназначен для сравнения двух свободно набираемых значений (что означает, что строка "3" может быть набрана с помощью утки до числа 3). Присвоение только одного значения из пяти возможностей отменяет цель выбора. 
var shown = this.options[this.selectedIndex].value == "SM";

select Доступ к выбору можно получить напрямую, чтобы получить значение текущей выбранной опции. Использование и повторное использование переменных является важной и фундаментальной парадигмой в программировании. Так что используйте то, что у вас уже есть. Обратите внимание, что конкретное значение не присваивается ( "SM" ) - вместо этого значение того, что будет выбрано , присваивается shown. 

var shown = select.value;

Выпуск № 3
Последняя строка синтаксически верна, но неверна в том смысле, что она противоречит тому, чем закончится остальная часть кода. Ссылка на #id хороша сама по себе, но наличие нескольких тегов, похожих по назначению и дизайну, должно быть сгруппировано Атрибуты имени класса и формы должны использоваться для групп. document.querySelectorAll() может использоваться для сбора нескольких тегов в группы, называемые NodeLists или HTML Collections (небольшая разница между ними). Поскольку у вас есть форма, в следующей демонстрации используется несколько специальных веб-API, которые специализируются на тегах форм и элементах управления . Вот список ссылок на то, что использовалось для демонстрации, подробности о том, что происходит построчно, комментируются в демонстрации:

Существует значительное количество изменений в коде OP (почти все, кроме основной функции.) Следует отметить, что значения параметров заменяются на номера индексов, чтобы повысить эффективность и гибкость за счет использования общих значений.

Демо 
// Reference the form
const main = document.forms.main;
/*
Collect all form controls into a NodeList (input, output,
textarea, select, button, fieldset) nested within form#main.
*/
const x = main.elements;
/*
A - Pass Event Object 
B - Get the value of select#TOR (e.target always points to the
    clicked, changed, hovered, etc tag) and convert it into a real
    number.
C - Collect all form controls [name=tasks] into a NodeList    
    (x.tasks).
D - Loop through the NodeList and remove .show class from each 
    tag of NodeList (fieldset[name=tasks])
E - if the value from line #B is NOT -1...
F - Assign class .show to the fieldset within the NodeList at the
    indexed position of the value from line #B
*/
function menu(e) { //A
  const selected = Number(e.target.value); //B
  const tasks = x.tasks; //C

  for (let t = 0; t < tasks.length; t++) { //D
    tasks[t].classList.remove('show'); //D
  }
  if (selected != -1) { //E
    tasks[selected].classList.add('show'); //F
  }
}

// Register select#TOR to the change event, menu() is the callback
x.TOR.onchange = menu;
:root {
  font: 700 2.5vw/1.2 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

#main {
  width: 100vw;
  height: 100vh;
}

section.task {
  position: relative;
  min-width: 300px;
  height: 100vh;
  margin: 0 auto;
  padding: 5vh 2vw;
}

fieldset.task {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 85%;
  margin: 2vh auto 5vh 1vw;
  visibility: collapse;
  transform: scaleY(0);
  transform-origin: top;
}

fieldset.task.show {
  z-index: 1;
  visibility: visible;
  transform: scaleY(1);
  transition: 0.4s transform ease-out
}

input,
output,
select,
button {
  display: inline-block;
  font: inherit;
  height: 6vh;
  line-height: 6vh;
  vertical-align: middle;
  padding: 0 3px
}

#date0 {
  height: 7vh;
  line-height: 7vh;
  width: 30vw;
}

#TOR {
  height: 8vh;
  line-height: 8vh;
}
<form id='main'>
  <header class='menu'>
    <label for="date0">Date of Requests</label>
    <input id="date0" name='date' class="date" type="date">
    <label for="TOR">Tasks</label>
    <select id="TOR" class="menu">
      <option value='-1' selected>Choose a Task</option>
      <option value="0">Task 1</option>
      <option value="1">Task 2</option>
      <option value="2">Task 3</option>
      <option value="3">Task 4</option>
      <option value="4">Task 5</option>
    </select>
  </header>
  <section class='task'>
    <fieldset id='CO' name='tasks' class="task show">
      <legend>Task 1</legend>
      <p>CO</p>
      <p>CO</p>
      <p>CO</p>
      <p>CO</p>
    </fieldset>
    <fieldset id='ASM' name='tasks' class="task">
      <legend>Task 2</legend>
      <p>ASM</p>
      <p>ASM</p>
      <p>ASM</p>
      <p>ASM</p>
      <p>ASM</p>
      <p>ASM</p>
    </fieldset>
    <fieldset id='SM' name='tasks' class="task">
      <legend>Task 3</legend>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
      <p>SM</p>
    </fieldset>
    <fieldset id='AM' name='tasks' class="task">
      <legend>Task 4</legend>
      <p>AM</p>
      <p>AM</p>
      <p>AM</p>
      <p>AM</p>
    </fieldset>
    <fieldset id='RC' name='tasks' class="task">
      <legend>Task 5</legend>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
      <p>RC</p>
    </fieldset>
  </section>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...