У меня есть раскрывающееся меню со списком школьных предметов в нем, последний вариант – «Добавить новый предмет», поэтому, когда пользователь выбирает этот параметр, мне нужно, чтобы появилось текстовое поле.
Моя форма HTML выглядит следующим образом: (Я включил только соответствующие биты, на нем есть немного больше.
<form method="post" action="createQuestion.php" name="cq"> <select name="subject" id="subject"> <option value="biology">Biology</option> <option value="maths">Maths</option> <option value="economics">Economics</option> <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option> </select> <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> </form>
Я потратил годы, пытаясь заставить это работать с javascript, и я просто не могу заставить его работать вообще.
Это js я написал, но не работает
function addSubject(){ newSub = document.getElementById('newSub').name selectedSubject = document.getElementById('subject').value if (selectedSubject == newSub){ document.getElementById(newSubtxt).style.display = 'block'; }}
Я был бы так благодарен, если бы кто-то помог мне с javascript, чтобы он сработал. Заранее спасибо 🙂
Измените стиль текстового поля на
<input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'>
Я использовал jQuery (javascript library), чтобы решить вашу проблему.
$(document).ready(function () { $('#subject').change(function (){ if($('#subject').val()=='newSub') $('#newSubtxt').show(); else $('#newSubtxt').hide(); }); });
Смотрите мой jsfiddle
Измените свой невидимый вход на:
<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />
и ваши js:
function addSubject() { var selectedSubject = document.getElementById('subject').value; if (selectedSubject == 'newSub') { document.getElementById('newSubtxt').style.display = 'block'; } }
Также см. Мой jsfiddle .