Форум

anndi07 · #1 (**permalink**) 11.08.2020, 13:06

Добрый день. Как сделать так, чтоб, если в input ввести значение >=16, то должны появиться скрытые style="display:none" обязательные поля checkbox и select. Догадываюсь, что просто, но не получается.

laimas · #2 (**permalink**) 11.08.2020, 13:44

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

anndi07 · #3 (**permalink**) 12.08.2020, 04:23

Делала с селектом, вот код, нужно теперь с input, при введенном значение >=16, должны появиться скрытые style="display:none" обязательные поля checkbox и select, помогите, если можете.

<td><font color="000066" style="font-size:14px" style="font-family:Arial">Необходимость:<font color="red">*</font></td>
<td><select name="select" id="select" required="required" required aria-required="true" style="width:250px; color:#000066; font-size:12px; font-family:arial;">
<OPTION></OPTION>
<OPTION VALUE="1">Нет</OPTION>
<OPTION VALUE="2">Есть</OPTION></select>
</td>
</tr>

<td><p><font id="P" style="display:none">Мощность<font color="red">*</font></td>
<td><input type="text" size="37" name="P_br" style="display:none" id="P_br"></p></td>
</tr>
<td><p><font id="N" style="display:none">Напряжение:<font color="red">*</font></td>
<td><input type="text" size="37" name="U1" style="display:none" id="U1"></p></td>
</tr>

<script language="JavaScript">
$("#select").on('change', function(){
if($(this).val() == 2){
$("#P, #N, #P_br, #U1").show();
} else {
$("#P, #N, #P_br, #U1").hide();
}
})
</script>

laimas · #4 (**permalink**) 12.08.2020, 05:00

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

anndi07 · #5 (**permalink**) 12.08.2020, 05:27

Роль скрытых полей- просто скрытые поля. Пусть отправляются на сервер, без проверки. Это не так важно для моей задачи. Можете помочь?

laimas · #6 (**permalink**) 12.08.2020, 05:47

Маразм какой-то, какой тогда смыл вообще их показывать. Ну коли нравится это, то можно, но почему в коде обрабатывается select, а речь идет о "нужно теперь с input, при введенном значение >=16"? Что это за поле и где оно в форме? Да и по ходу тут не просто поля скрывать надо, а метки к ним, то есть блоки.

laimas · #7 (**permalink**) 12.08.2020, 06:04

По такому принципу: в css определите класс, который скрывает блок, в котом размещены скрываемые поля с метками (а для этого есть label, а о теге font надо забыть). И вообще не используйте таблицу как элемент разметки, у нее иное предназначение, лучше поищите в сети как оформляются формы. Для примера:

.hidden {
    display: none;   
}

<form>
<input name="as" />
<div id="box">
<input name="i1" value="1"/>
<input name="i1" value="2"/>
</div>
</form>

$('input[name=as]').on('input', function() {
    this.value = this.value.replace(/\D/,'');
    $('#box').toggleClass('hidden', this.value >= 16)
});

anndi07 · #8 (**permalink**) 12.08.2020, 06:37

Что-то Ваш пример не работает. Скрытые поля изначально видны. Если в строку "as" записать число >16, ничего не меняется. Мне нужно, чтоб при записи в строку as числа >=16, появились поля checkbox и select.
А выше код был просто для примера.

laimas · #9 (**permalink**) 12.08.2020, 06:49

Сообщение от anndi07

Что-то Ваш пример не работает.

Вы jQuery то подключите, и код должен быть либо после html элементов скрываемых, либо в обработчике события загрузки страницы. А в элемент div id="box" помещайте что угодно, все что в нем и будет показываться/скрываться по условию.

laimas · #10 (**permalink**) 12.08.2020, 06:53

Сообщение от anndi07

Скрытые поля изначально видны.

Они и видны. Если код подключаемый или в секции head размещен, то работать он может только так:

<html>
<head>
<meta charset="utf-8">
<style>
.hidden {
    display: none;   
}
</style>
<!-- подключение самой библиотеки -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- код -->
<script>
$(function() {
    $('input[name=as]').on('input', function() {
    this.value = this.value.replace(/\D/,'');
    $('#box').toggleClass('hidden', !(this.value >= 16))
});
});
</script>
</head>
<body>
<form>
<input name="as" />
<div id="box" class="hidden">
<input name="i1" value="1"/>
<input name="i2" value="2"/>
<p>И все что угодно тут будет скрываться/отображаться по условию</p>
</div>
</form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript