Python Flask: How to access the data from an HTML textarea using a hyperlink button which is not inside the HTML Form tag?

Question

I am making a simple Flask web-app.

It will simply take text input.
The user will type in the text and click on the submit button.

I have created the textarea inside Form HTML tag for text input. And I have a Submit button created using a hyperlink tag .

How can I access the text inside the textarea when the Submit is clicked?

Note: I do not want to use the default submit option available within the form tag.

HTML for Textarea :

<form action="{{ url_for('publish') }}" method="post">
    <textarea name="text" class="form-control" rows="1" placeholder="Enter your message"></textarea>
</form>

HTML for Submit button :

<a href="{{ url_for('publish') }}" method="post"> Submit </a>

Flask code to retrieve textarea input from user :

@app.route('/publish', methods=['GET', 'POST'])
def publish():
    message = request.form['text']
    print(message)
    print('well')
    return render_template('index.html')

moosearch · Answer 1 · 2021-02-25T07:00:18.577

0

Based off this question Post Method to URL from a onclick function

Assign an id to your form, then an onclick event to your link as such:

<a onclick="document.getElementById('form-id').submit();" href="{{ url_for('publish') }}" method="post"> Submit </a>

You should be able to retain your flask code as normal afterwards.

It would be easier to use the submit button inside the form element. You can always style it to your liking with CSS. If you insist on not doing do, then you will have to add a 'click' event listener on your current Submit Button that posts the textarea data to your endpoint using AJAX. Your choice of either using vanilla JS, jquery, or the like.

Then within Flask, you can access the arguments by using

from flask import request
# ... Definitions
args = request.get_json()
text = args['textarea_text'] # the key is whatever you use in your AJAX call
# ... Rest of endpoint

Here is some more information regarding that: Get the data received in a Flask request

edited Feb 25 '21 at 07:00

answered Feb 25 '21 at 06:52

moosearch

176
9

I added an id to my form and the onclick code. But it is returning no data. - request.form is empty ImmutableMultiDict([]) - request.form['text-id'] results in key error Here's the code as it looks now - `

Submit ` – legacyunited Feb 25 '21 at 16:10
The only other thing I would try is adding back the 'action' and the 'method' attribute to the form element. Otherwise, you may have to use AJAX – moosearch Feb 25 '21 at 18:39
Thank you. Adding the action and method did not work either. But I took your initial advice and used the submit input ( '' ). Couldn't exactly replicate the CSS I had used for the '' tag. The animation is not being applied. But at least it gets the form data. – legacyunited Feb 25 '21 at 19:10

score 0 · Answer 2 · answered Feb 26 '21 at 01:53

Is HTML for Textarea in the 'index.html'? Because I see that the route '/publish' has 'GET' method. If yes, 'index.html' should be first rendered with the 'GET' method, and the text inside the form is NOT available at this moment. You can only get the text when the 'POST' method is called.

@app.route('/publish', methods=['GET', 'POST'])
def publish():
    if request.method == 'POST':
        message = request.form['text']
        print(message, flush=True)
        return render_template('index.html')
    else:
        print('well', flush=True)
        return render_template('index.html')

By the way, you can try this to put text value into request.form['text']:

<form action="{{ url_for('publish') }}" method="post">
    <textarea name="text" id="text" class="form-control" rows="1" placeholder="Enter your message">{{ request.form['text'] }}</textarea>
</form>

Python Flask: How to access the data from an HTML textarea using a hyperlink button which is not inside the HTML Form tag?

2 Answers2