CODEWITHSUNDEEP
javascriptpythonhtmlflask
vabm
vabm

Reputation: 285

Return javascript variable in Python / Flask

I am working on a small Flask app and I am having trouble finding the way to access a javascript array from Python to be printed as csv.

The general setup of my Flask file is (I am trying to print in the console to see if this is working, then I can write as csv later):

from flask import Flask, render_template, request
@app.route('/assemblies', methods=['GET', 'POST'])
def assemblies():
    myColours = request.form.get('colours', type=str)
    print myColours
    return render_template('assemblies.html')
if __name__ == '__main__':
    app.run(debug=True)

Then, in my html I have a dropdown selector:

<select id="Layer1">
    <option value="0">Empty</option>
    <option value="1">Blue</option>
    <option value="2">Red</option>
    <option value="3">White</option>
    <option value="4">Gray</option>
</select><br>

I access the selected value in Javascript like this:

function getColours() {
    var c = document.getElementById("Layer1");
    var colour = c.options[c.selectedIndex].value;
    return colour;
}

And in html I use a form to post the results:

<form method="post">
    <button onclick="getColours()" type="submit" value="colour">Click me</button>       
</form>

I know the html button is posting but I cannot access the results in Python. I am new to Flask and cannot find the problem in other questions or tutorials. Any help would be more than welcome.

Upvotes: 1

Views: 6632

Answers (3)

simanacci
simanacci

Reputation: 2344

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/assemblies')
def assemblies():
    mycolours = request.form.get('colours')
    return render_template('assemblies.html', mycolours=mycolours)

@app.route('/select')
def select():
    return render_template('select.html')
if (__name__ == "__main__"):
    app.run(debug=True)

select.html

<form action="/assemblies" method=['GET', 'POST']>
    <select name="colours">
        <option value="0">Empty</option>
        <option value="1">Blue</option>
        <option value="2">Red</option>
        <option value="3">White</option>
        <option value="4">Gray</option>
    </select>
    <br>
    <input type="submit" value="submit">      
</form>

assemblies.html template:

<p>{{mycolours}}</p>

The output for mycolours is the value you select. For example if you select empty it prints 0 and if you select white it prints 3.

Upvotes: 1

Asif
Asif

Reputation: 489

Sorry to post directly as answer due to less reputation, but it should be comment.

Your select has no name attribute; it'll never be sent as part of the POST. Give it a name attribute as well as a value:

<select id="Layer1" name="layer">

You can retrieve all values of the list using MultiDict.getlist():

request.form.getlist('layer')

Upvotes: 0

Marko Mackic
Marko Mackic

Reputation: 2333

Let's assume your python is right and you need to post to assemblies your code would be like this:

<form action="/assemblies" method="post">
    <select name="colours">
    <option value="0">Empty</option>
    <option value="1">Blue</option>
    <option value="2">Red</option>
    <option value="3">White</option>
    <option value="4">Gray</option>
    </select>
    <br>
    <button type="submit">Click me</button>       
</form>

JS should be avoided where it can be avoided :) and this is not something dynamic, so this will send a post request with colours="0" for example if Empty is selected

Upvotes: 1

Related Questions