CODEWITHSUNDEEP
javascriptjquery
user1592380
user1592380

Reputation: 36317

Button click no longer works after typing into textbox

I have a textbox that I would like to add text to by keyboard, as well as mix in some pre defined phrases from a drop down box. When I first come to the page there is no problem adding the phrases into the textbox, but once I type something in the button stops working

The HTML is:

  <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>

My jquery is:

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

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

How can I fix this?

Upvotes: 1

Views: 65

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Use val to set the value of textarea And val to access the select value.

You were trying to use append on a form element. 

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

supposed to be

$('#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);
    }
});

Upvotes: 3

Related Questions