I'm currently developing a journal book app using Flask and Bootstrap 5. One of the features I'm working on is a deletion feature, where users can input the number of records they want to delete. I want this feature to display a confirmation modal to the user, showing the corresponding row information in the modal body. If the input is invalid (e.g. not an integer or exceeds the existing record count), Flask will show an error message using flash messaging.
HTML code snippet:
<form class="col-md-3" method="POST" autocomplete="off">
<div class="card">
<div class="card-body">
<div>
<label for="deleteform" class="d-inline">Number to delete:</label>
<input type="text" class="form-control" id="delete_number" name="delete_number" value="1" onchange="myFunction()">
<button type="button" class="btn" data-bs-toggle="modal" href="#confirm_modal">Delete</button>
</div>
</div>
</div>
<div class="modal fade" id="confirm_modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete <span id="num_to_delete"></span> records</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><span id="row_text"></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-color" id='delete_entry' name="delete_entry" value="cancel">Delete</button>
</div>
</div>
</div>
</div>
</form>
JavaScript code snippet:
<script>
var number = document.getElementById('delete_number').value;
document.getElementById("num_to_delete").innerText = number;
//create_text() is function to generate modal body text
//get_row is the object corresponding to the number we want
document.getElementById("row_text").innerText = create_text(get_row);
function myFunction() {
number = document.getElementById('delete_number').value;
document.getElementById("num_to_delete").innerText = number;
get_row = obj[size - Number(number)];
document.getElementById("row_text").innerText = create_text(get_row);
}
</script>
Python code snippet: (outline of how I want the flashing messages to work)
num = request.form.get('delete_number')
if num != "":
if num.isdigit():
num = int(num)
if num <= len(list_of_sheets):
# remove last n items
list_of_sheets = list_of_sheets[:len(list_of_sheets) - num]
with open('file.pkl', 'wb') as
pickle.dump(list_of_sheets, f)
flash('Succeed', category='success')
else:
flash('Error', category='error')
else:
flash('Error', category='error')
else:
flash('Error', category='error')
Currently, the modal will always appear regardless of the input's validity. I understand that the modal pops up before submission, while my flash message is generated after submission. I'm wondering if there's a way to conditionally show the modal – if the input is valid, show the modal, else just submit and display the error messages.
I'm not very experienced in web development, so any assistance would be greatly appreciated. 🙏