#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. вы должны использовать видимость CSS
Ответ №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) {...});
, …).
Комментарии:
1. Да, вы правы, я не рассматривал выбор и текстовые области
Ответ №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>
Комментарии:
1. Меня всегда поражает, как даунвотеры никогда не будут возражать против объяснения причины, по которой они это сделали.