How to return list of values selected in dropdown using flask and html

Question

I have four dropdowns and I trying to return a list of all the options selected back. I am using html with flask. I have a button placed named start. I need that on the click of start button the list of all the 4 options selected in the dropdown should be returned. I am very new to Flask. This is the first time I am working with it, so please help me.

The html code is

<!DOCTYPE html>
<html>
  <head>
    <meta name = "viewport" content = "width=device-width, initial-scale =1.0">
    <title>Select Options</title>
   <style>
    body {
        background: url("F:/Meethi Folder/COLLEGE/COMPETITIONS/Sidh Competition/nmims_logo.png");
        background-position:515px 330px;
        background-repeat: no-repeat;
        background-size:15%;
         }

    h2 {
     color: black;
       }

    .wrapper{
        text-align:center;
    }
    .button{
        position:absolute;
        left:570px;
        background-color:#A9A9A9;
        font-size: 30px;
        top:35%;
    }   

    form{
        display:inline-block
    }

    .ex
    {
    margin:auto;
    width:90%;
    padding:40px;
    border:outset;
    }

    select
     {
    display:inline-block;
    cursor:pointer;
    font-size:16px;
    }
    .ey
    {
     display:inline-block;
    padding:40px;
     } 

    .gap{
    clear:both;
    margin-bottom:2px;
    }

   </style>
  </head>

<body>

<div class = "ex">
<form method="post">
<h2> Choose The Programme:</h2>
      <select name="val">
        <option value="None">Select Programme</option>
        <option value="BTech">BTech</option>
    <option value="BTech Integrated">BTech Integrated</option>
        <option value="MTech">MTech</option>
        <option value="MBATech">MBATech</option>" . $options . "
      </select>
</form>

<form class = "ey">
<h2> Choose The Course:</h2>
      <select>
        <option value="None">Select Course</option>
        <option value="CS">Computer Science</option>
    <option value="Civil">Civil</option>
        <option value="DS">Data Science</option>
    <option value="Electrical">Electrical</option>
    <option value="Electronics">Electronics</option>
    <option value="CS">Chemical</option>
    <option value="CS">Mechatronics</option>
        <option value="IT">Information Technology</option>
    <option value="Mech">Mechanical</option> " . $options . "
      </select>
</form>

<form class="ey">
<h2> Choose The Year:</h2>
      <select>
        <option value="None">Select Year</option>
        <option value="First Year">First Year</option>
        <option value="Second Year">Second Year</option>
        <option value="Third Year">Third Year</option>
    <option value="Fourth Year">Fourth Year</option>
    <option value="Fifth Year">Fifth Year</option>
    <option value="Sixth Year">Sixth Year</option>
      </select>
</form>

<form class = "ey">
<h2> Choose The Hour:</h2>
      <select>
        <option value="None">Select Time Slot</option>
        <option value="8:00 am">8:00 am</option>
        <option value="9:00 am">9:00 am</option>
        <option value="10:00 am">10:00 am</option>
    <option value="11:00 am">11:00 am</option>
    <option value="12:00 pm">12:00 pm</option>
    <option value="1:00 pm">1:00 pm</option>
    <option value="2:00 pm">2:00 pm</option>
    <option value="3:00 pm">3:00 pm</option>
    <option value="4:00 pm">4:00 pm</option>
    <option value="5:00 pm">5:00 pm</option>
      </select>
</form>

<br><br>

<div class = "wrapper">
<button class = "button" onclick=click()>Start</button>
</div>


</div>

</body>

thanks for the code. What is $options after the options in the select tag ? — mrid
– mrid, Commented Sep 26, 2019 at 5:21

mrid · Accepted Answer · 2019-09-26 07:10:28Z

2

You need to post the data to your flask server using either plain forms, or JS.

This will be your HTML:

<form class = "ey" method="POST" action="{{ url_for('submitForm') }}"> <!-- note action -->
    <select name="select1"> <!-- note the name -->
        <option value="None">Select Course</option>
        <option value="CS">Computer Science</option>
        <option value="Civil">Civil</option>
        <option value="DS">Data Science</option>
        <option value="Electrical">Electrical</option>
        <option value="Electronics">Electronics</option>
        <option value="Chem">Chemical</option>
        <option value="ME">Mechatronics</option>
    </select>
</form>

And there should be something similar to this on flask:

from flask import Flask, flash, redirect, render_template, \
     request, url_for

app = Flask(__name__)

@app.route('/')
@app.route('/home', methods = ['GET'])
def home():
    return render_template('form.html')

@app.route('/submit-form', methods = ['POST'])
def submitForm():
    selectValue = request.form.get('select1')
    return(str(selectValue))

Update #1

Change your python code to:

from datetime import datetime
from flask import render_template,request,redirect,url_for,Flask

app = Flask(__name__)

@app.route('/')

@app.route('/home',methods = ['GET'])
def home():
  return render_template('form2.html')

@app.route("/hello", methods = ['POST'])
def hello():
    select = request.form.get('val')
    return select


if __name__=='__main__':
    app.run(host='0.0.0.0', port=8080, debug=True)

edited Sep 26, 2019 at 7:10

answered Sep 26, 2019 at 5:34

mrid

5,7886 gold badges34 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Kopal Sharma Over a year ago

It says Internal Server Error Occurred

Kopal Sharma Over a year ago

Internal Server Error The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

Kopal Sharma Over a year ago

It is not giving an error anywhere, when I compile it and the screen loads on local host, instead of dropdowns it says that Internal Server Error

Kopal Sharma Over a year ago

Hi so, in the line where request.form.get() is used it gives an error saying Working outside of request context. This typically means that you attempted to use functionality that needed an active HTTP request. Consult the documentation on testing for information about how to avoid this problem.

mrid Over a year ago

@KopalSharma I've edited my answer. check out update #1. I've tested it

|

Collectives™ on Stack Overflow

How to return list of values selected in dropdown using flask and html

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related