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

ProgramBox

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

Post author:admin
Запись опубликована:3 февраля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь отобразить обязательные поля по щелчку с помощью 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>

Каков наилучший способ для этого?

Ответ №1:

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

Имейте в виду, что yu может захотеть изменить селектор 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) {...}); , …).

Ответ №2:

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

 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>

Ответ №3:

Если вы хотите сделать это на 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;
}

Ответ №4:

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

 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>

Ответ №5:

Вы можете обернуть все поля в контейнере, например <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;
}

Ответ №6:

Вы используете 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>