Multiple buttons on a flask webapp?

Question

I'm making my first webapp using python and flask, it is a simple calculator but I'm currently stuck trying to use more than one button. At the beginning it was abe just to show a graph, here is the python code:

class FormulaForm(Form):
    formula = StringField('formula')
    graph = SubmitField('graph')

@app.route('/')
def calculate():
    form = FormulaForm()
    formula = request.args.get('formula','')
    points = mp.make_points(formula,0,7)
    comp = make_plot(points[0],points[1])
    return render_template('index.html',the_script=comp[0],the_div=comp[1],form=form)

And here is the html code:

<form method="GET" action="">
    <br />
        {{ form.formula }}
    <br />
        {{ form.graph }}
</form>

So far so good. But I don't know how to add more functionality, for example I would like to add a button that shows the formula evaluated at some value x. I tried adding an extra inputfield and an extra button in the form, something like this:

class FormFormula(Form):
    formula = StringField('formula')
    graph = SubmitField('graph')
    evaluate = StringField('evaluate_at')
    evaluate = SubmitField('evaluate')

But then I don't know how to make the view handle two different actions. I think I found a solution here but it only works when the method is "POST" and that makes the page reload which I don't want. So, is there a way to use multiple buttons in the same view?

If you don't want the page to reload you'll have to use [AJAX](https://developer.mozilla.org/en/docs/AJAX) — nathancahill, Apr 29 '15 at 04:21

score 0 · Accepted Answer · answered Apr 29 '15 at 05:38

@app.route('/start' ,methods=['POST'])
def stop():
    "process done here"
    return Something

Your app.py like this and and html file this

    <script src="static/js/ajax.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
    $("#start").click(function(event){
    $.post(
        "/start",
        function(data) {
            window.alert(data);         
            }
        );      
            });
    });

</script>

<button id ="start" type="button" value = "Load Data">Start</button>

Multiple buttons on a flask webapp?

1 Answers1