CODEWITHSUNDEEP
pythonhtmlflaskweb-applications
Joe
Joe

Reputation: 12417

Print a text of textbox in HTML with Flask after pressing a button

This is my first exercise in Flask and I would like to understand what I am doing wrong here.

I want to insert a text in a textbox and then visualize it in HTML I have already looked many answers on StackOverflow, including this: Set a python variable in flask with a button and javascript

This is my python code:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def my_form():
    return render_template('test.html')

@app.route("/", methods=['GET','POST'])
def func_test():
    if request.method == 'POST':
        text = request.form['Value1']
        return render_template('test.html', value1=text)

if __name__ == "__main__":
    app.run(port=5000, debug=True)

and this is my HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form methods="POST">
<p>Login </p><br>
    <p>Value1 <input type = "text" name = "Value1" /></p>
    <p><input type = "submit" value = "submit" name = "submit" /></p>

</form>
input is {{value1}}
</body>
</html>

What I would like is that after the text is written in the textbox and the button is pressed, the text is printed after input is

Thanks

Upvotes: 0

Views: 4616

Answers (2)

Ade_1
Ade_1

Reputation: 1486

well, you can wrap your txt result in an if block that only shows when there is value

   {% if value %}
   input is {{value1}}
   {% else %}
    input is: 
    {% endif %}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="POST">
<p>Login </p><br>
    <p>Value1 <input type = "text" name = "Value1" /></p>
    <p><input type = "submit" value = "submit" name = "submit" /></p>

</form>
input is {{value1}}
</body>
</html>

Upvotes: 1

mechanical_meat
mechanical_meat

Reputation: 169354

You're wanting to accept user input from an HTML form, and return that to the page. As far as I know you're going to need some kind of asynchronous Javascript (aka AJAX) to get this done.

Below is a full example modified from How to display a returned input in Flask using Ajax? for your situation.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>    
        <p>Login </p><br>
        <form action='/process' method="POST" autocomplete="off">
            <div>
                <p>Value1 <input type="text"  name="value1" id="value1"></p>
                <p><button type="submit">Submit</button></p>
            </div>
         </form>
         <p id="input_is"></p>
    </body>
</html>

Asychronous Javascript/AJAX, put this in a file called script.js in your static directory:

$(document).ready(function() {
    $('form').on('submit', function(event) {       
      $.ajax({
         data : {
            value1 : $('#value1').val(),            
                },
            type : 'POST',
            url : '/process'
           })           
       .done(function(data) {                 
        $('#input_is').text(data['response']).show();      
     });
     event.preventDefault();
     });     
});

And your Flask route:

from flask import jsonify # add to your existing import 

@app.route('/process', methods=['POST'])
def process():          
    user_input = request.form['value1']
    print(user_input) # just for debugging purposes
    return jsonify({'response' : user_input})

Upvotes: 1

Related Questions