CODEWITHSUNDEEP
javascriptjqueryhtml
user2338180
user2338180

Reputation: 67

How Can I Transfer Text From Input Box to Text Area?

I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.

It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either. 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="Chat.js"></script>
<title>
    Chat Client Prototype
</title>
</head>

<body>
    <div ID="topBar">
    </div>

    <h2 ID="header">Chat Client</h2>

    <div ID="chatBox">
        <div ID="topBar2">
        </div>

        <div ID="header2">
            Chat Client
        </div>

        <textarea ID="textArea" name="textArea">
        </textarea>

            <form ID="in">
                <input ID="textField" type="text">
                <button ID="send" type="button" name="Send" value="send">Send</button>
            </form>
    </div>

</body>
</html>

Chat.js

function sendText(){
$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').val($('#textArea').val() + text);
        $('#textField').val('');
    });
});
}

Upvotes: 0

Views: 3035

Answers (5)

designtocode
designtocode

Reputation: 2245

You dont need to put it in a function. You can just leave it to Jquery :)

Your stuff in a FIDDLE to see

Jquery:

$('#send').click(function () {
    var text = $('#textField').val();
    $('#textArea').append(text);
    $('#textField').val('');
});

UPDATE

Use append() to update the textarea with new text!

Upvotes: 0

federicot
federicot

Reputation: 12341

Just don't wrap it in your function sendText:

$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').val($('#textArea').val() + text);
        $('#textField').val('');
    });
});

Upvotes: 0

BNewton.co.uk
BNewton.co.uk

Reputation: 35

This seems to work for me:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').html($('#textArea').html() + text);
        $('#textField').val('');
    });
});
</script>
<title>
    Chat Client Prototype
</title>
</head>

<body>
<div ID="topBar">
</div>

<h2 ID="header">Chat Client</h2>

<div ID="chatBox">
    <div ID="topBar2">
    </div>

    <div ID="header2">
        Chat Client
    </div>

    <textarea ID="textArea" name="textArea"></textarea>

        <form ID="in">
            <input ID="textField" type="text">
            <input ID="send" type="button" name="Send" value="send"/>
        </form>
</div>

</body>
</html>

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

Well, it work if you change your button to submit type and bind the event to form submit:

$('#in').submit(function () {
    var text = $('#textField').val();
    $('#textArea').val($('#textArea').val() + text);
    $('#textField').val('');
    return false;
});

http://jsfiddle.net/AztSB/

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Don't wrap document ready handler inside sendText() function, use that instead:

$(document).ready(function () {
    $('#send').click(sendText);
});

function sendText(){
    var text = $('#textField').val();
    $('#textArea').val($('#textArea').val() + text);
    $('#textField').val('');
}

Upvotes: 3

Related Questions