125

I was wondering if there was a way to take something from a text box in the HTML, feed it into flask, then parse that data with Python. I was thinking this might involve some JS but I could be wrong. Any ideas?

ollien
  • 4,418
  • 9
  • 35
  • 58
  • Why not use a HTML form and POST it directly? Or do you need to do this asynchronously? In that case, you'll have some reading up to do on AJAX. :-) – Martijn Pieters Sep 05 '12 at 09:10
  • 2
    I know I can use an HTML form, but how would I pass that info to the flask app? – ollien Sep 05 '12 at 09:11

5 Answers5

210

Unless you want to do something more complicated, feeding data from a HTML form into Flask is pretty easy.

  • Create a view that accepts a POST request (my_form_post).
  • Access the form elements in the dictionary request.form.

templates/my-form.html: 

<form method="POST">
    <input name="text">
    <input type="submit">
</form>

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def my_form():
    return render_template('my-form.html')

@app.route('/', methods=['POST'])
def my_form_post():
    text = request.form['text']
    processed_text = text.upper()
    return processed_text

This is the Flask documentation about accessing request data.

If you need more complicated forms that need validation then you can take a look at WTForms and how to integrate them with Flask.

Note: unless you have any other restrictions, you don't really need JavaScript at all to send your data (although you can use it).

davidism
  • 121,510
  • 29
  • 395
  • 339
pacha
  • 2,992
  • 1
  • 16
  • 18
  • 1
    Hey, this worked, once, but then now throws an error 500, any ideas? – ollien Sep 06 '12 at 02:06
  • 1
    It should be working just fine... Put `app.debug = True` just before `app.run()` so you get the exception and traceback of the error. – pacha Sep 06 '12 at 08:05
  • 1
    Yep, I forgot about that, I was an idiot and forgot to put my HTML in my template folder. – ollien Sep 06 '12 at 22:59
  • I wasted a bit of time trying to do this with a larger textarea instead of textbox if anyone needs to do this with Flask the solution is [here](https://stackoverflow.com/questions/37345215/retrieve-text-from-textarea-in-flask?answertab=active#tab-top) – cardamom Jun 25 '17 at 10:01
  • @cardamom I don't really get what you mean. Using a textarea or a input of type text doesn't change the solution in any way (the one you're linking is exactly the same as this one). You don't have to change the Python side, just replace `` by `` and you should be fine. – pacha Jun 25 '17 at 12:49
  • @pacha I am inexperienced with flask and frontend, when I tried to modify your solution from `input` to `textarea` the submit button went away and hitting enter didn't work either, but probably missed some of the subtle details of this modification which you just mentioned in your comment. – cardamom Jun 25 '17 at 13:02
  • @cardamom If the submit button went away, it is likely that there was a typo in the textarea closing tag. Glad you found your way out though! – pacha Jun 25 '17 at 13:23
17

Declare a Flask endpoint to accept POST input type and then do necessary steps. Use jQuery to post the data.

from flask import request

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data(data):
    if request.method == "POST":
         #perform action here

var value = $('.textbox').val();
$.ajax({
  type: 'POST',
  url: "{{ url_for('parse_data') }}",
  data: JSON.stringify(value),
  contentType: 'application/json',
  success: function(data){
    // do something with the received data
  }
});
davidism
  • 121,510
  • 29
  • 395
  • 339
Kracekumar
  • 19,457
  • 10
  • 47
  • 56
3

All interaction between server(your flask app) and client(browser) going by request and response. When user hit button submit in your form his browser send request with this form to your server (flask app), and you can get content of the form like:

request.args.get('form_name')
Denis
  • 7,127
  • 8
  • 37
  • 58
2

Assuming you already know how to write a view in Flask that responds to a url, create one that reads the request.post data. To add the input box to this post data create a form on your page with the text box. You can then use jquery to do

var data = $('#<form-id>').serialize()

and then post to your view asynchronously using something like the below.

$.post('<your view url>', function(data) {
  $('.result').html(data);
});
Pratik Mandrekar
  • 9,362
  • 4
  • 45
  • 65
0

This worked for me. 

def parse_data():
    if request.method == "POST":
        data = request.get_json()
        print(data['answers'])
        return render_template('output.html', data=data)

$.ajax({
      type: 'POST',
      url: "/parse_data",
      data: JSON.stringify({values}),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function(data){
        // do something with the received data
      }
    });
Anurag Sharma
  • 76
  • 1
  • 5