Python Flask: send variable data to textarea on the same html page w/ JQuery

Question

I have a one-page simple web project which gets data from 1 textarea, processes it and needs to output result on the same page inside another textarea.

I've tried following How to post the output result on the same page in flask app?, but I actually suck at js ( especially jquery :) ), so my server throws 400 BAD REQUEST.

handle_data() of app.py

@app.route("/", methods=['GET', 'POST'])
def handle_data():
    if request.method == 'POST':
        holder = Submission(request.form['submitText']) 
        it = holder.res.splitlines()

        for line in range(len(it)):
            global tst
            if "What kind of submission is this?" in it[line]:
                if "Sold Property" in it[line+1]:
                    tst = Sale(request.form['submitText'])
                    return jsonify(tst=tst)
                elif "Financed" in it[line+1]:
                    tst = Loan(request.form['submitText'])
                    return jsonify(tst=tst)
                else:
                    tst = Lease(request.form['submitText'])
                    return jsonify(tst=tst)

    return render_template("index.html")

index.html

<button class="bigButton" id="sendSub">START</button>

    <div class="textAreaCont">
        <form action="" method="POST" id="sub_form">
            <textarea rows="4" cols="50" class="textArea" id="submitText"></textarea>
            <button class="smallButton" id="clearButton">CLEAR</button>
        </form>
    </div>

    <div class="textAreaCont">
        <textarea rows="4" cols="50" class="textArea" id="getText" readonly></textarea>
        <button class="smallButton" id="saveAsButton">SAVE AS</button>
        <button class="smallButton" id="copyButton">COPY</button>
    </div>

script.js

$(document).ready(function(){
    $("#sendSub").click(function(){
        var $isEmpty = $("#submitText").val();
        if($isEmpty != ""){
        // somehow tell handle_data() it's POST request and throw the result of handle_data() inside #getText textarea
        }

Appreciate all the help!

Kostas Charitidis · Answer 1 · 2019-08-22T11:19:52.957

2

It should be something like this but make sure you read correctly the json data in javascript.

$(document).ready(function(){
    $("#sendSub").click(function(){
        var isEmpty = $("#submitText").val();
        if(isEmpty != ""){
            $.ajax({
                url: '/',
                data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}
                success: function (data) {
                    $('#getText').val(data);  # the data returned from your view
                }
          });
        }
    });
}):

edited Aug 22 '19 at 11:19

answered Aug 22 '19 at 10:21

Kostas Charitidis

2,991
1
12
23

I'm not sure with what I need to replace 'your_handle_data_view_url' and 'the_data_you_want_to_handle'? And I don't need to pass any data to the handle_data(), only get the result of handle_data() and put it in the textarea – Taras Aug 22 '19 at 11:01
This works, thanks, but it outputs just the html of my index.html page :) – Taras Aug 23 '19 at 06:37
@Taras that's what your function returns then. – Kostas Charitidis Aug 23 '19 at 08:05

Python Flask: send variable data to textarea on the same html page w/ JQuery

1 Answers1