CODEWITHSUNDEEP
pythonflaskjinja2
Niraj
Niraj

Reputation: 31

Display Result in Same Page Using python flask

I am using python flask for sending form data into another HTML template. I need to show the result in same page where HTML input form exists. Currently response is being forwarded to next page.

I tried to run via JQuery but still unable to get the result.

app.py

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def student():
   return render_template('index.html')

@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'POST':
      result = request.form
      return render_template("result.html",result = result)

if __name__ == '__main__':
   app.run(debug = True)

index.html

<html>
   <body>
      <form action = "http://localhost:5000/result" method = "POST">
         <p>Name <input type = "text" name = "Name" /></p>
         <p>Physics <input type = "text" name = "Physics" /></p>
         <p>Chemistry <input type = "text" name = "chemistry" /></p>
         <p>Maths <input type ="text" name = "Mathematics" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
   <div>
   </div>
    </body>
</html>

Result.html

<!doctype html>
<html>
   <body>
      <table border = 1>
         {% for key, value in result.items() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

Now the result is displayed at result.html, i need that to be displayed on index.html. Please suggest, how to make this happen.

Upvotes: 3

Views: 14074

Answers (2)

user15824070
user15824070

Reputation:

I know this is an older question, but for anyone else that's possibly interested. All you have to do is change

return render_template("result.html",result = result)

to

return render_template("index.html",result = result)

or to whatever other page you may want to return to. Render_template just returns whatever you ask it to, if you want to return just the data, or something else you can just say

return (data)

or whatever your data is called.

Upvotes: 4

janpeterka
janpeterka

Reputation: 660

If I understand your problem correctly, I can see multiple ways:

1)
You can have your result.html included in your index.html.
Then you just pass your result data into render_template function.
read more about templates here

it will look something like this:

{% include 'result.html' %}

in index.html
and result.html will look like:

<div id="result_div">
  some code
</div>

2)
You can use AJAX to post form data, generate html in flask, pass it as AJAX result and update your page with it via javascript.

$.ajax({
                        type: 'POST',
                        url: '/result',
                        data: JSON.stringify({
                            'data' : data,
                        }),
                        contentType: 'application/json;charset=UTF-8',
                        success: function(response){
                            // fill with html
                            $('#result_div').html(response.result);

                        },
                        error: function(error) {
                            // console.log(error);
                        }
                    });

of course you will have to update your flask code on /results too.

In both cases, you want to have one page (which can consist of multiple html files).

Upvotes: 2

Related Questions