Bootstrap and Flask: How to receive a POST?

Question

I'm designing a small web calculator using Bootstrap and Flask. However I'm close finished, here is my code:

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        return render_template('finish.html',
                               number1=request.form['number1'],
                               number2=request.form['number2'],
                               finish=(request.form['number1'] * request.form['number2']))
    else:
        return render_template('index.html')

And here is a part of index.html:

<form>
    <div class="form-group">
        <input type="text" class="form-control" name="number1" placeholder="Number1">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="number2" placeholder="Number2">
    </div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

So I wish receive a POST, and return the result. But when I trying to run my program, enter these two number and submit them. The program didn't receive a POST, here is the log:

127.0.0.1 - - [24/Sep/2015 22:20:25] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [24/Sep/2015 22:20:25] "GET /dist/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [24/Sep/2015 22:20:25] "GET /assets/js/ie10-viewport-bug-workaround.js HTTP/1.1" 404 -
127.0.0.1 - - [24/Sep/2015 22:20:29] "GET /?number1=12&number2=32 HTTP/1.1" 200 -

So the program received something like GET /?number1=12&number2=32, not a post. And the web page is still at /. How do I change this to POST or use /?number1=12&number2=32？

Also take a look at [this](http://stackoverflow.com/questions/2314401/what-is-the-default-form-http-method). — jlnabais, Sep 24 '15 at 14:38
@jlnabais Well, the output is the same. I think that because bootstrap. If I don't use it the program will work good. — Remi Guan, Sep 24 '15 at 14:40
When you fixed the `method="POST"` issue - did you refresh the page in your browser (or wherever you're testing)? Use Ctrl-Refresh to ensure all caches are clear etc and then re-test with that fixed. — J Richard Snape, Sep 24 '15 at 15:08
@JRichardSnape Hmm...When I click the button, the page will auto refresh. And the numbers that I entered will be clear. And the link will be change to `/?number1=12&number2=22`, but the web page is still `/`(only change the like, didn't change the page and didn't raise a 404 error). — Remi Guan, Sep 24 '15 at 15:11

Loïc · Accepted Answer · 2015-09-24T14:47:35.270

6

Change your form so that it posts the data (you also have to add some bootstrap info) :

<form method="POST" role="form" class="form-horizontal">

Also change your button to an input :

<input type="submit" class="btn btn-default" value="Submit"/>

edited Sep 24 '15 at 14:47

answered Sep 24 '15 at 14:38

Loïc

11,804
1
31
49

Well, the output is the same. I think that because bootstrap. If I don't use it the program will work good. – Remi Guan Sep 24 '15 at 14:40
Bootstrap isn't supposed to change how your html forms act. – Loïc Sep 24 '15 at 14:41
Well, the problem is still there. – Remi Guan Sep 24 '15 at 14:44
When I press the button, the link will change to `http://0.0.0.0:5000/?number1=123&number2=123`. And then nothing will happen. The log show that received some GET like I wrote in my question. – Remi Guan Sep 24 '15 at 14:47
I've edited my answer. you have to add `role='form'` – Loïc Sep 24 '15 at 14:51
Nothing changed. Maybe I should learn what does `GET /?number1=12&number2=32` mean? – Remi Guan Sep 24 '15 at 14:54
All right I don't know why doesn't this work before, but now this can work so good. However Thanks :) – Remi Guan Sep 24 '15 at 22:40

Bootstrap and Flask: How to receive a POST?

1 Answers1