Using Jinja Template inside the value attribute of a text input tag

Question

I am trying to design a web page with web-framework flask. This is the basic representation of the problem I faced.

app.py

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('main.html', value="Utkarsh Prakash") 

@app.route('/approved', methods = ['POST', 'GET'])
def approved():
    return "Done"

if __name__ == '__main__':
    app.run(debug = False, threaded=False)

main.html

<HTML>
    <BODY>
        <FORM action = "/approved" method = "POST">
            {{value}}
            <INPUT type="text" name="text" value={{value}}>
            <INPUT type = "Submit">
        </FORM>
    </BODY>
</HTML>

I just want the value which I am rendering from my flask code to be passed as predefined value of my text input file. Although {{value}} is containing both the words "Utkarsh Prakash", my input text field only contains one word, i.e., "Utkarsh".

enter image description here

How can I display both the words in the input text area?

Tasnuva Leeya · Accepted Answer · 2020-07-29 17:20:45Z

4

Problem is in your main.html, you didn't quote the attribute value, so the result of your template is

<input type="text" name="text" value=Utkarsh Prakash>

Just change your template so it has value="{{ value }}"

<input type="text" name="text" value="{{ value }}">

edited code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action = "/approved" method = "POST">
            {{value}}
            <input type="text" name="text" value="{{ value }}">
            <input type = "Submit">
        </form>
</body>
</html>

One more thing, please change all the uppercase html tags to lower case.

answered Jul 29, 2020 at 17:20

Tasnuva Leeya

2,8351 gold badge17 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Using Jinja Template inside the value attribute of a text input tag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related