Get textarea value from HTML page to Python Flask using Javascript

Question

I'm having a bit of trouble with figuring out how to get a post from Javascript to work, to my Python Flask server.

Here's the important part of what I've got in my html file

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js </script>
<script type=text/javascript>
    $('a#test').bind('click', function() {
        var textBox = document.getElementById('targetTextArea').value;
        $.post('/postmethod', {text: textBox} );
    });
</script>

<!--textarea-->
<textarea rows="1" cols="20" id="targetTextArea">
</textarea>

<!--button-->
<form method="post" role="form">
<a href=# id=test>
    <input type="button" value="submit" id="submit" onClick="writeOut()">
</a>
</form>

and here's what I've got in my Python flask file

@app.route('/postmethod', methods = ['POST'])
def postmethod():
    data = request.form['text']
    print "Hello world!"
    print data
    return data

When I run my python script the textarea and button are there as they should be, but when I type into the textarea and click the button nothing is printed. Please help.

you also don't need to add method="post" to your <form> tag because the jQuery code already calls $.post(...) — johnheroy
– johnheroy, Commented Feb 7, 2019 at 17:21

tuditec · Accepted Answer · 2019-02-07 18:51:53Z

1

You try with the long way? Replace $.post('/postmethod', {text: textBox} ); for

$.ajax({
        method: "POST",
        url: "postmethod", //here can be '/postmethod'
        dataType: 'text',
        data: {text: textBox},
        success: function(result) {
            // example
            $('body').html(result)
        }
});

This should print on page the content of the variable "data" of python code.

Another thing,

I see that you are using two ways for the submit button, if you use

$('a#test').bind('click', function() { //code });

then, the onClick="writeOut()" is not neccessary.

I hope you find it useful, regards.

answered Feb 7, 2019 at 18:51

tuditec

581 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ved_Code_it · Accepted Answer · 2019-02-07 17:20:21Z

0

id's value should be in quotes

<a href="#" id="test">
        <input type="button" value="submit" id="submit" onClick="writeOut()">
    </a>

answered Feb 7, 2019 at 17:20

Ved_Code_it

7746 silver badges10 bronze badges

Comments

dgero95 · Accepted Answer · 2019-02-08 02:25:00Z

0

The solution I found was to add

$(function() {
});

around it

$(function() {
    $('a#test').bind('click', function() {
        var textBox = document.getElementById('targetTextArea').value;
        $.post('/postmethod', {text: textBox} );
        return false;
    });
});

and also the return false prevents the page of redirecting

sorry guys, I'm new to Javascript. Thank you very much!

answered Feb 8, 2019 at 2:25

dgero95

642 silver badges10 bronze badges

Collectives™ on Stack Overflow

Get textarea value from HTML page to Python Flask using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related