Появление скрытых полей, при вводе определенного значения в input
Добрый день. Как сделать так, чтоб, если в input ввести значение >=16, то должны появиться скрытые style="display:none" обязательные поля checkbox и select. Догадываюсь, что просто, но не получается.
|
Все зависит от контекста задачи, например, если речь о форме отправляемой на сервер, то она уже может иметь эти поля (если и список скрытый, то это странно), но не иметь имен. Поля без имени браузер на сервер не передает. Имена у них добавляются/удаляются по условию значения какого-то поля.
|
Делала с селектом, вот код, нужно теперь с 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> |
Вы либо не поняли о чем написано выше, либо ... Какова роль скрытых полей? Даже будучи скрытыми они такие же полноценные элементы формы вашей, а значит при любых условиях будут отправлены на сервер.
|
Роль скрытых полей- просто скрытые поля. Пусть отправляются на сервер, без проверки. Это не так важно для моей задачи. Можете помочь?
|
Маразм какой-то, какой тогда смыл вообще их показывать. Ну коли нравится это, то можно, но почему в коде обрабатывается select, а речь идет о "нужно теперь с input, при введенном значение >=16"? Что это за поле и где оно в форме? Да и по ходу тут не просто поля скрывать надо, а метки к ним, то есть блоки.
|
По такому принципу: в 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)
});
|
Что-то Ваш пример не работает. Скрытые поля изначально видны. Если в строку "as" записать число >16, ничего не меняется. Мне нужно, чтоб при записи в строку as числа >=16, появились поля checkbox и select.
А выше код был просто для примера. |
Цитата:
|
Цитата:
<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>
|
| Часовой пояс GMT +3, время: 14:24. |