--
-- Table structure for table `skills`
--
CREATE TABLE `skills` (
`id` int(11) NOT NULL,
`skillname` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `skills`
--
ALTER TABLE `skills`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `skills`
--
ALTER TABLE `skills`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
bootstrap select https://developer.snapappointments.com/bootstrap-select/examples/
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app.py
#app.py
from flask import Flask, render_template, request, jsonify
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'testingdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/')
def index():
return render_template('index.html')
@app.route("/ajax_add",methods=["POST","GET"])
def ajax_add():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
hidden_skills = request.form['hidden_skills']
print(hidden_skills)
cur.execute("INSERT INTO skills (skillname) VALUES (%s)",[hidden_skills])
mysql.connection.commit()
cur.close()
msg = 'New record created successfully'
return jsonify(msg)
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Python Flask Multiple Select option using Bootstrap Select Plugin and Jquery Ajax Mysqli database</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<br />
<h2 align="center">Python Flask Multiple Select option using Bootstrap Select Plugin and Jquery Ajax Mysqli database</h2>
<br />
<div class="col-md-4" style="margin-left:200px;">
<form method="post" id="multiple_select_form">
<select name="skills" id="skills" class="form-control selectpicker" data-live-search="true" multiple>
<option value="Python Flask">Python Flask</option>
<option value="Python Django">Python Django</option>
<option value="Express.js">Express.js</option>
<option value="Laravel">Laravel</option>
<option value="Spring">Spring</option>
<option value="Angular">Angular</option>
<option value="React">React</option>
</select>
<br /><br />
<input type="hidden" name="hidden_skills" id="hidden_skills" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<br />
</div>
</div>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#skills').change(function(){
$('#hidden_skills').val($('#skills').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#skills').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"/ajax_add",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#hidden_skills').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
</body>
</html>
