Selecting multiple items on an actionable list bootstrap, flask-wtf - html

Question

I am trying to add a delete button to a searchable list of emails like
this
I was wondering if anyone knows a way to highlight multiple items on a list like this and then send a list of the names to python when you hit the delete button? I can only find ways to do this with radios. I am sorry if this is a very basic question! I am just new to WTF forms and I cannot find anything on them relating to bootstrap lists.
Here is the code in question:
<div class="list-group-flush">
<form class="form-inline" action="{{ url_for('home') }}" method ="POST">
{% if data %}
{% for x in data %}
<a class="list-group-item list-group-item-action">{{ x }}</a>
{% endfor %}
{% endif %}
</form>
</div>
Thank you in advance!

Answer 1

If you are not using javascript (JS) you will struggle. JS allows you to react to a user's search entry and dynamically update the page using information that is fetched via a flask api route that will also search the db, and return info in JSON format.
If you insist on doing this without JS, then when you click search a Flask route will find the relevant emails and display them in a new render_template, everytime the user clicks search a new page is rendered which is often not optimal. I would then use a MultiCheckbox:
from wtforms import SelectMultipleField, widgets
class MultiCheckboxField(SelectMultipleField):
widget = widgets.ListWidget(prefix_label=False)
option_widget = widgets.CheckboxInput()
def Form(*search_options):
class TempForm(FlaskForm):
pass
found_emails = some_db_query_method(*search_options)
setattr(TempForm, 'emails', MultiCheckboxField('List of queried emails',
choices=[(x[0], x[1]) for x in found_emails])
return TempForm()
You can configure the CSS to control the look and feel of your checkboxes, as part of the multicheckbox

Answer 2

<div class="list-group-flush">
<form class="form-inline" action="{{ url_for('home') }}" method="POST">
{% if data %}
<select multiple id="mySelect">
{% for x in data %}
<option class="list-group-item list-group-item-action">{{ x }}</option>
{% endfor %}
</select>
{% endif %}
</form>
</div>
Try using a select form element with the ability to select multiple items. You can then access the values via form values.