3

I'm trying to build a simple online quiz using Flask and Python 3.6, using HTML forms with radio buttons to carry the selected answers between Flask routes. The first step is to select a category for the quiz, before leading to the actual quiz page, as follows:

app = Flask(__name__)
categories = ['Europe', 'South America', 'North America']
@app.route('/')
def select():
    return render_template('selecting.html', cats= categories)

@app.route('/quiz', methods = ['POST'])
def quizing():
    selected_cat = request.form['categories']
    return "<h1>You have selected category: " + selected_cat + "</h1>

Where 'selecting.html' is as follows:

<form action='/quiz' method='POST'>
<ol>
{% for cat in cats%}
    <li><input type = 'radio' name= 'categories' value ={{cat}}>{{cat}}</li>
{% endfor %}
</ol>
<input type="submit" value="submit"/>
</form>

When I select 'Europe', the quiz page reads:

<h1>You have selected category: Europe</h1>

However, when I select 'North America' the quiz page reads:

<h1>You have selected category: North</h1>

Why is the second word of the selected category not carried between the Flask routes and what can I do to retain the full category name?

4
  • I suggest you always check the resulting page html code in cases like this; you will spot problems in the html, which usually guide you through problems in rendering your template, nothing to do with loosing data "between routes". See Rob answer. Commented Feb 1, 2018 at 21:56
  • The latter two html snippets were copied from the 'view source' page of the resulting page, if that's what you mean? Would there be any other information I can retrieve from the 'view source' page? Commented Feb 2, 2018 at 10:32
  • Oh, sorry, I meant exactly what you've done, I focused on the expression "loosing data between routes" which suggests something more related to code in controllers, while the problem is just in the template rendering, and forgot you've actually done that. Commented Feb 2, 2018 at 23:10
  • No prob, thanks for thinking along! Commented Feb 3, 2018 at 9:54

1 Answer 1

8

According to the HTML5 documentation, an unquoted attribute must not have an embedded space.

Your input element expands to the following text:

<input type = 'radio' name= 'categories' value =North America>

Even though you mean for it to have a value attribute with a value of North America, it actually has a value attribute with a value of North and a America attribute with an empty value.

Try quoting the value attribute value:

<li><input type = 'radio' name= 'categories' value ="{{cat}}">{{cat}}</li>
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for thinking along! I'll test this once back home.
Works! Thanks very much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.