Обработчик событий считывает значение в html-списке и отображает html при этом условии
Извините, мой опыт работы с html и javascript ограничен, поэтому я пытаюсь найти лучший способ сделать это. По существу, я имею дело с некоторым html, который создает форму для пользователей, чтобы отправить сообщения. Форма позволяет выбрать тему и текст для ввода.
<td>Subject</td>
<td>
<select id="subject">
<option selected="selected" value="none">Please select a subject</option>
{% for subject in MESSAGE_SUBJECTS %}
<option value="{{subject}}">{{subject}}</option>
{% endfor %}
</select>
<!-- <input type="text" id="subject" size="80" value='No Subject' onfocus="if(this.value==this.defaultValue)this.value='';" name="subject" /> -->
</td>
</tr>
<tr>
<td>Message</td>
<td><textarea id="newmessage" cols="80" rows="6"
onfocus="if(this.value==this.defaultValue)this.value='';"
name="newmessage">Please type your message here</textarea></td>
</tr>
Не вдаваясь в излишние подробности, субъекты представляют собой просто ряд строк. Для целей данной статьи мы можем назвать их просто 'sub1' и 'sub2'. Я хочу сделать так, чтобы текстовая область появлялась только при выборе 'sub1' из выпадающего списка.
Я полагаю, что обработчик событий javascript - это то, что нужно, и есть связанный файл javascript с некоторыми функциями, но я не могу понять, как выглядит синтаксис. Я предполагаю, что это что-то вроде:
function conditionalMessage() {
if( subject == "sub2" ) {
//some code that defines displaying text to explain now message can be sent with this subject
} else {
//some code that displays the message box as it currently does
}
Является ли это случаем определения поля сообщения и текстового ответа как divs и последующего вызова divs?
Это система, основанная на Django.
Спасибо за любую помощь
Предполагая это как отображаемый html
<select id="subject">
<option selected="selected" value="none">Please select a subject</option>
<option value="sub1">sub1</option>
<option value="sub2">sub2</option>
</select>
Вы можете использовать слушатель события onchange следующим образом
Javascript
document.getElementById('subject').addEventListener('change', function() {
if(this.value=='sub1'){
document.getElementById('newmessage').style.display='block';
}
else
document.getElementById('newmessage').style.display='none';
});
Но перед этим примените этот css к textarea
#newmessage{
display:none;
}