how to detect which update button was clicked with Flask python(mongoDB) - html

Question

I need to develop back-end system and using(first time) Flask and mongodb for database. Basically, i need a dynamic table in a webpage with "add" button to add data to the table and "update" button for each row of data. So far, i have managed to load data(for table) from database once page is accessed and add new data to the table and database.
But I can not implement "update" button in each row, because I do not know how to detect which button was clicked in the table. I tried to get it through button value which was assigned to the ID of qualification(any row in table). Below is the table and i used bootstrap modal(which has the "html form" inside) for adding and updating
<table class="table table-condensed">
<thead>
<tr>
<th>Qualification</th>
<th>Calculation of overall result</th>
<th>Minimum Score</th>
<th>Maximum Score</th>
<th></th>
</tr>
</thead>
<tbody>
{% for qual in qualifications %}
<tr>
<td>{{ qual.qualificationName }}</td>
<td>{{ qual.calculation }}</td>
<td>{{ qual.minimumScore }}</td>
<td>{{ qual.maximumScore }}</td>
<td>
<!-- Button trigger modal -->
<form method="post" action="">
<<button type="submit" class="btn btn-danger" data-toggle="modal" data-target="#updateModalCenter"
name="updateBtn" value="{{ qual._id }}">Update
</button>
</form>
<!-- Modal -->
<div class="modal fade" id="updateModalCenter" tabindex="-1" role="dialog" aria-labelledby="updateModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLongTitle">Update Qualification</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="{{setupQual/qual._id}}">
<div class="form-group">
<label>Qualification Name</label>
<input type="text" class="form-control" name="qualNameUpdate">
</div>
<div class="form-group">
<label>Calculation of result by average of how many subjects: </label>
<select multiple class="form-control" name="calculationUpdate">
<option>1 subject</option>
<option>2 subjects</option>
<option>3 subjects</option>
<option>4 subjects</option>
<option>5 subjects</option>
<option>6 subjects</option>
<option>7 subjects</option>
<option>8 subjects</option>
</select>
</div>
<div class="form-group">
<label>Minimum Score</label>
<input type="number" class="form-control" name="minScoreUpdate" placeholder="Enter number(s) only">
</div>
<div class="form-group">
<label>Maximum Score</label>
<input type="number" class="form-control" name="maxScoreUpdate" placeholder="Enter number(s) only">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-primary" value="Save">
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
the backend code for adding
#app.route("/setupQual/add", methods = ['POST']) #addding to db from modal
def addQualification():
qualName = request.form['qualName']
calc = request.form['calculation']
minScore = request.form['minScore']
maxScore = request.form['maxScore']
addToDB = {
"qualificationName": qualName,
"calculation": calc,
"minimumScore": minScore,
"maximumScore": maxScore
}
db.qualifications.insert_one(addToDB)
return redirect(url_for('setupQual'))
I tried many ways unsuccessfully and my last code for updating is this:
#app.route("/setupQual/<string: _id>" , methods = ['GET', 'POST']) #loading
from db for modal updating
def loadQualToUpdate():
updateBtnId = request.form['updateBtn']
qualUpdate = "myUni"#delete later, only for testing
updateQualifications = db.qualifications.findOne({
"_id": updateBtnId
})
qualName = request.form['qualNameUpdate']
calc = request.form['calculationUpdate']
minScore = request.form['minScoreUpdate']
maxScore = request.form['maxScoreUpdate']
updateDB = {
"$set": {
"qualificationName": qualName,
"calculation": calc,
"minimumScore": minScore,
"maximumScore": maxScore
}
}
db.qualifications.updateOne(updateQualifications, updateDB)
return redirect(url_for('setupQual'))
Obviously, page should not reload when "update" button is clicked. So, any suggestions to catch the "right" update button in the table using Flask python.

Answer 1

I did it by assigning ID value to hidden input
<input type="hidden" name="id" value="{{ qual._id }}" />
And requested from flask and found data by id and updated on mongodb