I am creating an instant messenger using jquery and am having trouble taking the message typed into the message field after clicking the "send" button

I have the html

<body>
    <div class="main-window">
    <div class="chat-screen"></div>
        <div class="bottom-wrapper">
            <input class="text-bar"></input>
            <input type="button" value="Send"class="send-btn">Send</input>
        </div>
    </div>                
<body>

and I have tried to append it using this jquery

$('.send-btn').click(function() {
    $(".text-bar").text().appendTo(".chat-screen");
});

But it doesn't seem to work. Can someone please point me in the right direction?

JSFiddle

8 Answers 11

up vote 3 down vote accepted

you need .val()

change

$(".text-bar").text()

to

$(".text-bar").val()


you code becomes Fiddle DEMO

use .append()

$('.send-btn').click(function () {
    $(".chat-screen").append($(".text-bar").val());
});


Clear Textbox and new chat in new line.

$(document).ready(function () {
    var chat_screen = $(".chat-screen");
    var text_bar = $(".text-bar")
    $('.send-btn').click(function () {
        chat_screen.append(text_bar.val() + '<br/>');
        text_bar.val('');
    });
});

Updated Fiddle DEMO

upvote
  flag
still doesn't work im affraid @Tushar Gupta – sMilbz
upvote
  flag
1 upvote
  flag
It works, thanks. How would I then clear the input box after the message is sent? @Tushar Gupta – sMilbz
upvote
  flag
$('.text-bar').val(''); – Praveen
upvote
  flag
@sMilbz $(".text-bar").val(''); – Tushar Gupta
upvote
  flag
upvote
  flag
Thanks. How would I get the next message to be on a new line @Praveen – sMilbz
1 upvote
  flag
Tushar Gupta updated the answer have a look – Praveen
upvote
  flag
upvote
  flag
@Praveen ty for helping :) – Tushar Gupta
upvote
  flag
why down-voted ?? – Tushar Gupta
upvote
  flag
How would I send the message using return key? @Praveen – sMilbz
upvote
  flag
@sMilbz better ask a new question . – Tushar Gupta

Try this.

 $('.send-btn').click(function(){
    $('.chat-screen').append($(".text-bar").val());
    });
upvote
  flag
Still no luck. The value hasn't even changed in firebug @MaheshMajeti – sMilbz

The .text() (and correct .val()) functions return strings, not jQuery objects, and therefore don't have the appendTo() function available on them. You'll need to do this instead:

$('.chat-screen').append($('.text-bar').val());

Also make sure that, if the script is in the <head> of your HTML page, or comes before the actual HTML of the elements, you wrap it in a DOM ready handler:

$(document).ready(function() {
    $('.send-btn').click(function(){
        $('.chat-screen').append($('.text-bar').val());
    });
});

And, of course, check that jQuery is being loaded correctly (it wasn't in your jsFiddle at all).

Since this is going to (probably) be running a lot of times, you'd want to cache the selectors for the chat screen and the text input, like so:

$(document).ready(function() {
    var $chatscreen = $('.chat-screen'),
        $textbar = $('.text-bar');
    $('.send-btn').click(function(){
        $chatscreen.append($textbar.val());
        $textbar.val('');
    });
});

Updated jsFiddle

Here is you fiddle updates: jsfiddle

Use val() instead text()

$('.send-btn').click(function(){
//$(".text-bar").val().appendTo(".chat-screen");
$(".chat-screen").append($(".text-bar").val())
$(".chat-screen").append('<br />')
});

please see http://jsfiddle.net/K95P3/15/

Several issues:

  1. Add space between value and class attributes in input
  2. Change .text() to .val() - inputs don't have text nodes, just values
  3. Use $('.chat-screen').append($(".text-bar").val());
  4. Make sure you have jQuery included

See updated fiddle http://jsfiddle.net/K95P3/11/

Actually, you really should append an html tag, not just text. I mean, you could, but shouldn't.

What i would recommend is this:

Create a base container for a message like:

       <div class="message-container" style="display:none;"> 
          <span class="message"> </span>
       </div>

You then clone this container, stuff it the value of the input in the chat and append it to the chat screen. The code could be something like:

      $('.send-btn').click(function(){
               var container = $('.message-container:hidden').clone(true).show();
               container.find('.message').text($(".text-bar").val());
               container.appendTo($('.chat-screen'));
       });

Append text and dropdown value sametime

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+'     '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
 $(".chat-screen").append($("#bus").val()+'<br/>');
 $("#bus").val('');
 });
 });
</script>
</head>
<body>


  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input id="bus" type="text">
  <button type="submit">submit</button>
  <br><br>
  <div class="chat-screen2" style="float:left;"></div>
  <div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.