How i can get data in Python Script using Flask

Question

I have written a html code,which will get the 3 inputs from user. I have attached html code snippet as follows; You can give it a try running this code. this code basically accepts 3 values from the user those are team1,team2 and match_id and upon clicking on predict button, I want those value to go in my python script where i have written machine learning algorithm.

<!DOCTYPE html>
<html>

<head>
    <title>Criclytics</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="bootstrap.min.js"></script>
        <script src="jquery.min.js"></script>
    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
        @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);

        body{
            margin: 0;
            padding: 0;
            background: #fff;

            color: black;
            font-family: Arial;
            font-size: 25px;


            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

        }

        .bcg-img{
            width: 100vw;
            height: 100vh;
            z-index: -1;
            position: fixed;
                background-image: url("bg-blurred.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        table, td, th {    
               text-align: center;
        }

        table {
            border-collapse: collapse;
            width: 50%;
        }

        th, td {
            padding: 15px;
        }
        .button1 {width: 250px;}
    </style>
</head>
<body>
    <div class="bcg-img"></div>
    <div class="jumbotron" align="center" style="opacity:0.60">
        <h1 align="center"><b>Criclytics</b></h1>
        Predicting chances of winning
    </div>
    <form onsubmit="http://localhost:5000/"> 
         <div class="col-xs-3">
             <label for="ex2">Team 1</label>
             <input class="form-control" id="team1" id="team1" type="text" placeholder="Enter team 1">
        </div>
             <div class="col-xs-3">
             <label for="ex2">Team 2</label>
             <input class="form-control" id="team2" id="team2" type="text" placeholder="Enter team 2">
        </div>
        <div class="col-xs-3">
             <label for="ex2">Match ID:</label>
             <input class="form-control" id="matchid" id="matchid" type="number" placeholder="Enter match ID ">
        </div>
        <br>
        <input type="submit" value="Predict" class="btn btn-info btn-lg" style="width: 250px"/>
        <!--
        <div width="cover" padding="30%"><!--put your graph here</div>-->
    </form>
</body>
</html>

I am using flask to create the server on the localhost:5000 and i have written code, as follows;

from flask import Flask, render_template
from flask import request
app = Flask(__name__)
print("hello")
@app.route('/')
def getrender():
    return render_template('/cric.html')

@app.route('/',methods=['GET','POST'])
def getinfo():
    if  request.method == 'GET':
        a=request.args.get('team1')
        b=request.args.get('team2')
        c=request.args.get('matchid')
        print(a,b,c)
    return a,b,c

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

html file runs perfectly on localhost:5000 but I dont know how I can access those user input values and use it as input for my machine learining algorithm. I just want help how to access those team1,team2 and match_id and get them in variables so that i can use them in my program.

what values are printed in the console when you print(a, b, c) — Espoir Murhabazi, Feb 01 '18 at 10:28
have a look at querystrings https://en.wikipedia.org/wiki/Query_string — jan-seins, Feb 01 '18 at 10:31
All i get on the screen when i rerun the program after entering values on localhost:5000 is "Restarting with stat" — Mayur Mahajan, Feb 01 '18 at 10:38
@jan-seins I am very new to this html and flask, and I am not from CS background, I am machine learning guy. — Mayur Mahajan, Feb 01 '18 at 10:39
I think the request.method will be POST if you use a form to submit? — sting_roc, Feb 01 '18 at 10:40
@sting_roc I have no idea. I tried implementing from Flask documentations — Mayur Mahajan, Feb 01 '18 at 10:40
@sting_roc Can u make necessary changes in code and suggest if it works for you or not, PLEASE — Mayur Mahajan, Feb 01 '18 at 10:41

sting_roc · Answer 1 · 2018-02-01T11:18:10.893

My advice:

Assign another route for the html page

@app.route('/cric')
def getrender():
    return render_template('/cric.html')

Update method check from GET to POST in function getinfo and use request.form to get the parameter

@app.route('/',methods=['GET','POST'])
def getinfo():
    print request.method  # print the request.method for debug purpose
    if  request.method == 'POST':
        a=request.form.get('team1')
        b=request.form.get('team2')
        c=request.form.get('matchid')
        print(a,b,c)

    return render_template('/cric.html')

And update the form header and assign three input with name in html:

<form action="http://localhost:5000/" method="post">
...
<input class="form-control" id="team1" name="team1" type="text" placeholder="Enter team 1">
...

Then you can visit the '/cric' to view the html page, then submit the form, which will invoke a post request to '/' and print the parameters.

everything works fine, except it doesn't print values values a,b,c I am using Spyder to run this program. — Mayur Mahajan, Feb 01 '18 at 11:04

Espoir Murhabazi · Accepted Answer · 2018-02-01T11:27:22.090

You have a problem with your form, all your input doesn't have a name attribute and instead it has 2 id attributes. So change one id attribute to name

here is the reason :

Definition and Usage The name attribute specifies the name of an element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Note: Only form elements with a name attribute will have their values passed when submitting a form.

Your Form should be like this :

<form method="POST" action="{{url_for('getinfo')}}">
         <div class="col-xs-3">
             <label for="ex2">Team 1</label>
             <input class="form-control" name="team1" id="team1" type="text" placeholder="Enter team 1">
        </div>
             <div class="col-xs-3">
             <label for="ex2">Team 2</label>
             <input class="form-control" name="team2" id="team2" type="text" placeholder="Enter team 2">
        </div>
        <div class="col-xs-3">
             <label for="ex2">Match ID:</label>
             <input class="form-control" id="matchid" name="matchid" type="number" placeholder="Enter match ID ">
        </div>
        <br>
        <input type="submit" value="Predict" class="btn btn-info btn-lg" style="width: 250px"/>
        <!--
        <div width="cover" padding="30%"><!--put your graph here</div>-->
    </form>

In your views functions, you should have 2 with different URLs: one for the home page and another for form submission

@app.route('/')
def getrender():
    return render_template('/cric.html')

@app.route('/predict', methods=['GET', 'POST'])
def getinfo():
    if request.method=='POST':
        a=request.form.get('team1')
        b=request.form.get('team2')
        c=request.form.get('matchid')
        print(a,b,c)
    else :
        return 'get Im in '
    return 'OK'

How i can get data in Python Script using Flask

2 Answers2