Is it possible to submit textarea data with Ajax?

Question

I'm trying to submit input data but I'd like to submit data of <textarea> instead of <input>. My original code:

<form action="/index/output" method="POST">
    <input type="text" name="text_box" id="t">   
</form>

<script>
    $('#t').keyup(function(){
        $.ajax({
            url : '/index/output',
            data : {
                text_box : $('input:text').val()
            },
            success : function(html) {
                $('#result').html(html);
            }
        })
    })
</script>

<div id="result"> </div>

I changed <input> to <textarea>

<form action="/index/output" method="POST">
     <textarea name="text_box" id="t">  </text> 
</form>

but it does not work well...

Is there a problem with my ajax code?

have you tried using a proper selector to target your textarea? — charlietfl, Sep 16 '15 at 10:37
@andrew — No! That gets the **default** value (formatted as HTML instead of text), not the current value. — Quentin, Sep 16 '15 at 10:37
`$('input:text')` is not a valid selector for textareas. You should try with just `$('textarea')` or, even better `$('[name="text_box"]')` — Loupax, Sep 16 '15 at 10:37
@Loupax — input:text is a perfectly valid jQuery selector. `'text'` would match `` elements, which don't exist in HTML. — Quentin, Sep 16 '15 at 10:38
@Loupax it certainly is a valid selector ... for an input. Your selctor `$('text')` isn't valid ...it;s looking for `` tag — charlietfl, Sep 16 '15 at 10:38
@Quentin ok, I learned something, seems ok if you explicitly set the innerhtml but not when the user changes it http://jsfiddle.net/3ag881hL/ — andrew, Sep 16 '15 at 10:48

score 7 · Accepted Answer · answered Sep 16 '15 at 10:37

7

Instead of

$('input:text').val()

use

$('textarea').val()

Or, even better, select it by id:

$('#t').val()

answered Sep 16 '15 at 10:37

slomek

4,873
3
17
16

score 3 · Answer 2 · answered Sep 16 '15 at 10:36

3

The problem is that your selector input:text means "Input elements of type text" and your <textarea> is not an <input>.

Just change the selector to actually match the element.

$('textarea')

answered Sep 16 '15 at 10:36

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered Sep 16 '15 at 10:38

Your problem has no correlation to your ajax code. Instead, your jQuery-Selector doesn't target textarea elements but only input elements. To fix this, you could either tell your ajax-call to submit the whole form or fix your selector. The selector would then look like this:

$('textarea').val()

Or like this

$('#t').val();

Danyal Sandeelo · Answer 4 · 2015-09-16T12:18:52.430

0

Yes, you can. Since you have defined the ID as tso you can access it with id like this:

 var textData = $('#t').val();

send it where ever you want to send.

edited Sep 16 '15 at 12:18

answered Sep 16 '15 at 10:43

Danyal Sandeelo

12,196
10
47
78

score -1 · Answer 5 · answered Sep 16 '15 at 10:48

-1

by the problem is your selector,

$('input:text') => means select the text box

so use instead of

$('textarea') => means select textarea

and dont use val() method becz textarea contains large number of character so to use html() method for get the value from textarea element

and also and

contentType: "text/plain; charset=utf-8",

if you are using asp.net means , contenttype is very to import for ajax to post url

answered Sep 16 '15 at 10:48

J.M.Farook

183
1
8

you sure about `text/plain` ?? – charlietfl Sep 16 '15 at 10:52
yes you need to pass just string meant add content type as text/plain – J.M.Farook Sep 16 '15 at 10:59
Hi charliet, may i know i will do mistake in my code – J.M.Farook Sep 16 '15 at 11:00
You should only set the content-type to text/plain if you are sending a plain text formatted request (which the original code is not) and if the server is expecting a plain text formatted request (and there is no suggestion that is the case). – Quentin Sep 16 '15 at 11:27
I have to get last word of sentence in textarea so I added `$('#t').val().split(" ").pop();` but when I use `$('#t').html().split(" ").pop();` it doesn't work.. – Hyung Kyu Park Sep 16 '15 at 11:32

Is it possible to submit textarea data with Ajax?

5 Answers5