CODEWITHSUNDEEP
pythonhtmlcssflask
Kopal Sharma
Kopal Sharma

Reputation: 69

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

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.enter image description here

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>

Upvotes: 0

Views: 11683

Answers (1)

mrid
mrid

Reputation: 5796

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)

Upvotes: 2

Related Questions