Нажатие кнопки больше не работает после ввода текстового поля

Question

У меня есть текстовое поле, которое я хотел бы добавить в текст текст, а также смешать некоторые предварительно определенные фразы из раскрывающегося списка. Когда я первый пришел на страницу нет проблем с добавлением фразы в текстовое поле, но как только я что-то типа в кнопке перестает работать

HTML, является:

<div class="tab-pane" id="message"> 
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea> 
    <a href="#message" class="btn btn-large btn-info" data-toggle="tab">Add Phrase</a> 
    <label for=message_list>message_list</label><select id=message_list><option>Hi There.</option><option>How Are You?</option></select> </div> 

Мой JQuery является:

$('#message').on("click", "a", function(){ 
....... 
.......... 

else if($(this).is(":contains(Add Phrase)")) { 
     $('#send_message').append($('#message_list').text()); 
    } 
}); 

Как это исправить?

Answer 1

Используйте val, чтобы установить значение textarea И val для доступа к значению выбора.

Вы пытались использовать append на элементе формы.

$('#send_message').append($('#message_list').text()); 

должен быть

$('#send_message').val($('#message_list').val()); 

Check Fiddle

$('#message').on("click", "a", function (e) { 
    e.preventDefault(); 
    if ($(this).is(":contains(Add Phrase)")) { 
     var $message = $('#send_message') 
      previousText = $message.val(); 
     var currText = previousText + ' ' + $('#message_list').val(); 
     $('#send_message').val(currText); 
    } 
});