Отображение обязательных полей при нажатии с помощью Javascript

Я пытаюсь отображать обязательные поля при нажатии с помощью javascript. У меня большая форма, и внутри нее есть обязательные поля. Идея состоит в том, чтобы иметь кнопку, чтобы пользователь мог нажимать (например, переключаться) и видеть только обязательные поля?

Пока что мой подход выглядит примерно так:

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {} else document.getElementById('ifYes').remove();
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

Как лучше всего это сделать?

Источник
  • 0
    вам нужно использовать видимость CSS
Codelisting
за 0 против
Лучший ответ

Отображение и скрытие необязательных полей с помощью нажатия кнопки

function toggleOptional(event){

  var button = event.currentTarget;
  
  var action = button.getAttribute('data-action');
  
  //var optionalFields =  document.querySelectorAll("form input:not([required])");
  
  var optionalFields =  document.querySelectorAll("form :not([required])");
  
  
  if(action == "hide"){
  
      optionalFields.forEach(function(value){
        value.style.display = "none";
      });
    
      button.setAttribute('data-action','show');
      
      button.innerText = "Show  Optional ";
  
  } else {
  
     optionalFields.forEach(function(value){
        value.style.display = "inline-block";
      });
    
      button.setAttribute('data-action','hide');
      
      button.innerText = "Hide Optional";
  }

}
input,textarea,select {
  width : 70vw;
}
<button onclick="toggleOptional(event)" data-action="hide"  >Hide Optional</button>


<form>


    <input type="text" name="usrname" placeholder="usrname" required>
    
    
    <input type="text" name="phone" placeholder="phone" required >
     
    <input type="text" name="company" placeholder="company" >
    
    <select  name="birthyear" required  >
      <option value="">Select Year of Birth</option>
      <option value="1992">1992</option>
      <option value="1993">1993</option>
    </select>
    
    <textarea required name="description" placeholder="description" ></textarea>

</form>

за 1 против

Если вы действительно хотите переключить необязательные поля, вы можете просто скрыть все необязательные элементы в форме (как в этом примере).

Имейте в виду, что вы можете изменить селектор CSS, чтобы иметь больше контроля над тем, какие элементы вы хотите скрыть.

например:

form input:not([required]),
form select:not([required]),
form textarea:not([required]), ....

Вы также можете захотеть не просто скрыть эти поля, но и стилизовать их по-другому (непрозрачность или что-то в этом роде).

function toggleOptionalFields() {
  document.querySelectorAll('form > :not([required])').forEach(field => field.hidden = !field.hidden);
}
<form>
  <input required value="i am required" />
  <input />
  <select required>
    <option value="1">required! :)</option>
  </select>
  <input />
  <input />
  <input required value="i am required too" />
</form>

<button onclick="toggleOptionalFields()">Toggle optional fields</button>

Также этой функции не будет в IE, потому чтоquerySelectorAll().forEach и стрелочная функция не поддерживается.

Вы можете легко изменить это, используя обычную функцию вместо стрелочной функции и перебирая по-разному через список элементов (например,for(;;) или[].forEach.call(document.querySelectorAll(), function(element) {...}); , ...).

  • 0
    Да, вы правы, я не рассматривал выборки и текстовые поля
за 0 против

Вы можете обернуть все поля в контейнер, например<div> или<form>

HTML

<div class="container">
  <input required />
  <input />
  <input required />
</div>

тогда ваша функция кнопки переключения должна переключать класс в контейнере

Javascript

function yesnoCheck() {
  let container = document.querySelector('.container')
  container.classList.toggle('only-required')
}

теперь вы можете использовать CSS, чтобы скрыть необязательное поле, если у контейнера есть классonly-required

CSS

.container.only-required input:not([required]) {
  display: none;
}
за 0 против

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

var toggleIfYes=false;
    function yesnoCheck() {
toggleIfYes=!toggleIfYes
      if (toggleIfYes) {
         //show the elements
     } else{
         //hide the elements
      }
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

за 0 против

Если вы хотите сделать это в javascript, вот простое решение

Javascript

function yesnoCheck() {
  var x = document.getElementById("ifYes");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

CSS

#ifYes{
    display: block;
}
за -1 против

Вы используетеdocument.getElementById('ifYes').remove() который удаляет элемент из DOM. Таким образом, вы не сможете восстановить свой элемент, когда снова нажмете кнопку переключения. Кроме того, вы проверяете<button/> элемент, как если бы это был<input type="checkbox" /> так что вы можете вместо этого использовать флажок.

Вам лучше использоватьdocument.getElementById('ifYes').style.display = 'none' как лучше всего подходит в данной ситуации:

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'none';
  } 
  else {
    document.getElementById('ifYes').style.display = '';
  }
}
<input type="checkbox" onclick="javascript:yesnoCheck();" id="yesCheck">Click</input>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

  • 0
    Меня всегда поражает, как отрицательные голоса никогда не будут возражать, если скажут причину, по которой они это сделали.
Codelisting
Популярные категории
На заметку программисту