I have adapted the following sample code https://tutorial101.blogspot.com/2021/01/python-flask-dynamic-loading-of.html in Flask to use the SQlite database. The objective of the app.py is to display the options for car brands, and then to display the available models by brand. The app.py uses two drop down boxes from which the user can make the selection. The original source code is written in Flask to access a MySQL database. I adapted the code for the app.py to use SQlite db.
The app.py is working perfectly. And I can visualize the two drop down boxes with the options. When I select a car brand, the app updates the second drop down box with the available models.
When the submit button is pressed I want to display the values of the two selections. Specifically which is the selected car make, and which is the selected model.
I have included an instruction in the code to display the value of the car brand, and also display the values that correspond to the car models. However, I cannot find a way to obtain the value of the selected car model.
How can I achieve this?
Thanks.
NB: The question text has been edited to be more specific. The essence of the question has not changed.
I attach the source code and the templates used.
app.py:
# flask sqlalchemy
from flask_sqlalchemy import SQLAlchemy
# app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
app.config['SECRET_KEY'] = "caircocoders-ednalan"
# sqlite config
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///testingdb.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
# Bind the instance to the 'app.py' Flask application
db = SQLAlchemy(app)
class Carbrands(db.Model):
__tablename__ = 'carbrands'
brand_id = db.Column(db.Integer, primary_key = True)
brand_name = db.Column(db.String(250))
def __repr__(self):
return '\n brand_id: {0} brand_name: {1}'.format(self.brand_id, self.brand_name)
def __str__(self):
return '\n brand_id: {0} brand_name: {1}'.format(self.brand_id, self.brand_name)
class Carmodels(db.Model):
__tablename__ = 'carmodels'
model_id = db.Column(db.Integer, primary_key = True)
brand_id = db.Column(db.Integer)
car_models = db.Column(db.String(250))
def __repr__(self):
return '\n model_id: {0} brand_id: {1} car_models: {2}'.format(self.model_id, self.brand_id, self.car_models)
def __str__(self):
return '\n model_id: {0} brand_id: {1} car_models: {2}'.format(self.model_id, self.brand_id, self.car_models)
# index.html
@app.route('/', methods=["POST","GET"])
def index():
q = Carbrands.query.all()
print(q)
carbrands = q
return render_template('index.html', carbrands=carbrands)
# response.html
@app.route("/get_child_categories", methods=["POST","GET"])
def get_child_categories():
if request.method == 'POST':
parent_id = request.form['parent_id']
car = Carbrands.query.filter_by(brand_id=parent_id).first()
print("Car brand '{0}' parent_id '{1}'".format(car.brand_name, parent_id))
carmodels = Carmodels.query.filter_by(brand_id=parent_id).all()
print(carmodels)
return jsonify({'htmlresponse': render_template('response.html', carmodels=carmodels)})
if __name__ == "__main__":
app.run(debug=True)
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Flask Dynamic Loading of ComboBox using jQuery Ajax and SQlite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search_category_id').change(function(){
$.post("/get_child_categories", {
parent_id: $('#search_category_id').val()
}, function(response){
$('#show_sub_categories').html(response);
$('#show_sub_categories').append(response.htmlresponse);
});
return false;
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 align="center">Python Flask Dynamic Loading of ComboBox using jQuery Ajax and SQlite</h3>
<form action="#" name="form" id="form" method="post">
<div class="form-group">
<label>Select Category</label>
<select name="search_category" id="search_category_id" class="form-control">
<option value="" selected="selected"></option>
{% for row in carbrands %}
<option value='{{row.brand_id}}'>{{row.brand_name}}</option>
{% endfor %}
</select>
</div>
<div id="show_sub_categories"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</body>
</html>
response.html:
<div class="form-group">
<label>Select Sub Category</label>
<select name="sub_category" id="sub_category_id" class="form-control">
<option value="" selected="selected"></option>
{% for row in carmodels %}
<option value="{{row.model_id}}">{{row.car_models}}</option>
{% endfor %}
</select>
</div>
